Jawaban:
Coba ini-
$('select').on('change', function() {
alert( this.value );
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="1">One</option>
<option value="2">Two</option>
</select>Anda juga dapat referensi dengan onchange event-
function getval(sel)
{
alert(sel.value);
}<select onchange="getval(this);">
<option value="1">One</option>
<option value="2">Two</option>
</select>.change()pintasan saja.
Saya mendapat kesan bahwa saya bisa mendapatkan nilai input pilih dengan melakukan $ ini (ini) .val ();
Ini berfungsi jika Anda berlangganan secara tidak mencolok (yang merupakan pendekatan yang disarankan):
$('#id_of_field').change(function() {
// $(this).val() will work here
});
jika Anda menggunakan onselectdan mencampur markup dengan skrip, Anda harus memberikan referensi ke elemen saat ini:
onselect="foo(this);"lalu:
function foo(element) {
// $(element).val() will give you what you are looking for
}
Ini membantu saya.
Untuk pilih:
$('select_tags').on('change', function() {
alert( $(this).find(":selected").val() );
});
Untuk radio / kotak centang:
$('radio_tags').on('change', function() {
alert( $(this).find(":checked").val() );
});
Anda dapat mencoba ini (menggunakan jQuery ) -
$('select').on('change', function()
{
alert( this.value );
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>Atau Anda dapat menggunakan Javascript sederhana seperti ini-
function getNewVal(item)
{
alert(item.value);
}<select onchange="getNewVal(this);">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>$('#select_id').on('change', function()
{
alert(this.value); //or alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="select_id">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>Fungsi panah memiliki cakupan yang berbeda dari fungsi,
this.valueakan memberikan undefined untuk fungsi panah. Untuk memperbaiki penggunaan
$('select').on('change',(event) => {
alert( event.target.value );
});Inilah yang bekerja untuk saya. Mencoba yang lain tanpa hasil:
<html>
<head>
<title>Example: Change event on a select</title>
<script type="text/javascript">
function changeEventHandler(event) {
alert('You like ' + event.target.value + ' ice cream.');
}
</script>
</head>
<body>
<label>Choose an ice cream flavor: </label>
<select size="1" onchange="changeEventHandler(event);">
<option>chocolate</option>
<option>strawberry</option>
<option>vanilla</option>
</select>
</body>
</html>Diambil dari Mozilla
Cari situs jQuery
HTML:
<form>
<input class="target" type="text" value="Field 1">
<select class="target">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>
</form>
<div id="other">
Trigger the handler
</div>JAVASCRIPT:
$( ".target" ).change(function() {
alert( "Handler for .change() called." );
});Contoh jQuery:
Untuk menambahkan tes validitas ke semua elemen input teks:
$( "input[type='text']" ).change(function() {
// Check input( $( this ).val() ) for validity here
});jQuery mendapatkan nilai elemen html tertentu menggunakan pada acara Change
$(document).ready(function () {
$('body').on('change','#select_box', function() {
$('#show_only').val(this.value);
});
}); <!DOCTYPE html>
<html>
<title>jQuery Select OnChnage Method</title>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<select id="select_box">
<option value="">Select One</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
<option value="Five">Five</option>
</select>
<br><br>
<input type="text" id="show_only" disabled="">
</body>
</html> Perhatikan bahwa jika ini tidak berfungsi, itu mungkin karena DOM belum dimuat dan elemen Anda belum ditemukan.
Untuk memperbaikinya, letakkan skrip di ujung badan atau gunakan dokumen siap
$.ready(function() {
$("select").on('change', function(ret) {
console.log(ret.target.value)
}
})jQuery(document).ready(function(){
jQuery("#id").change(function() {
var value = jQuery(this).children(":selected").attr("value");
alert(value);
});
})Biarkan saya berbagi contoh yang saya kembangkan dengan BS4, thymeleaf, dan boot Spring.
Saya menggunakan dua SELECT, di mana yang kedua ("subtopik") diisi oleh panggilan AJAX berdasarkan pemilihan yang pertama ("topik").
Pertama, potongan thymeleaf:
<div class="form-group">
<label th:for="topicId" th:text="#{label.topic}">Topic</label>
<select class="custom-select"
th:id="topicId" th:name="topicId"
th:field="*{topicId}"
th:errorclass="is-invalid" required>
<option value="" selected
th:text="#{option.select}">Select
</option>
<optgroup th:each="topicGroup : ${topicGroups}"
th:label="${topicGroup}">
<option th:each="topicItem : ${topics}"
th:if="${topicGroup == topicItem.grp} "
th:value="${{topicItem.baseIdentity.id}}"
th:text="${topicItem.name}"
th:selected="${{topicItem.baseIdentity.id==topicId}}">
</option>
</optgroup>
<option th:each="topicIter : ${topics}"
th:if="${topicIter.grp == ''} "
th:value="${{topicIter.baseIdentity.id}}"
th:text="${topicIter.name}"
th:selected="${{topicIter.baseIdentity?.id==topicId}}">
</option>
</select>
<small id="topicHelp" class="form-text text-muted"
th:text="#{label.topic.tt}">select</small>
</div><!-- .form-group -->
<div class="form-group">
<label for="subtopicsId" th:text="#{label.subtopicsId}">subtopics</label>
<select class="custom-select"
id="subtopicsId" name="subtopicsId"
th:field="*{subtopicsId}"
th:errorclass="is-invalid" multiple="multiple">
<option value="" disabled
th:text="#{option.multiple.optional}">Select
</option>
<option th:each="subtopicsIter : ${subtopicsList}"
th:value="${{subtopicsIter.baseIdentity.id}}"
th:text="${subtopicsIter.name}">
</option>
</select>
<small id="subtopicsHelp" class="form-text text-muted"
th:unless="${#fields.hasErrors('subtopicsId')}"
th:text="#{label.subtopics.tt}">select</small>
<small id="subtopicsIdError" class="invalid-feedback"
th:if="${#fields.hasErrors('subtopicsId')}"
th:errors="*{subtopicsId}">Errors</small>
</div><!-- .form-group -->Saya mengulangi daftar topik yang disimpan dalam konteks model, menunjukkan semua grup dengan topik mereka, dan setelah itu semua topik yang tidak memiliki grup. BaseIdentity adalah BTW kunci komposit @Embedded.
Sekarang, inilah jQuery yang menangani perubahan:
$('#topicId').change(function () {
selectedOption = $(this).val();
if (selectedOption === "") {
$('#subtopicsId').prop('disabled', 'disabled').val('');
$("#subtopicsId option").slice(1).remove(); // keep first
} else {
$('#subtopicsId').prop('disabled', false)
var orig = $(location).attr('origin');
var url = orig + "/getsubtopics/" + selectedOption;
$.ajax({
url: url,
success: function (response) {
var len = response.length;
$("#subtopicsId option[value!='']").remove(); // keep first
for (var i = 0; i < len; i++) {
var id = response[i]['baseIdentity']['id'];
var name = response[i]['name'];
$("#subtopicsId").append("<option value='" + id + "'>" + name + "</option>");
}
},
error: function (e) {
console.log("ERROR : ", e);
}
});
}
}).change(); // and call it once definedPanggilan perubahan awal () memastikan akan dieksekusi pada pemuatan ulang halaman atau jika suatu nilai telah dipilih sebelumnya oleh beberapa inisialisasi di backend.
BTW: Saya menggunakan validasi formulir "manual" (lihat "is-valid" / "is-invalid"), karena saya (dan pengguna) tidak suka bahwa BS4 menandai bidang kosong yang tidak diperlukan sebagai hijau. Tapi itu byond lingkup Q ini dan jika Anda tertarik maka saya dapat mempostingnya juga.
Saya ingin menambahkan, yang membutuhkan fungsionalitas tajuk khusus penuh
function addSearchControls(json) {
$("#tblCalls thead").append($("#tblCalls thead tr:first").clone());
$("#tblCalls thead tr:eq(1) th").each(function (index) {
// For text inputs
if (index != 1 && index != 2) {
$(this).replaceWith('<th><input type="text" placeholder=" ' + $(this).html() + ' ara"></input></th>');
var searchControl = $("#tblCalls thead tr:eq(1) th:eq(" + index + ") input");
searchControl.on("keyup", function () {
table.column(index).search(searchControl.val()).draw();
})
}
// For DatePicker inputs
else if (index == 1) {
$(this).replaceWith('<th><input type="text" id="datepicker" placeholder="' + $(this).html() + ' ara" class="tblCalls-search-date datepicker" /></th>');
$('.tblCalls-search-date').on('keyup click change', function () {
var i = $(this).attr('id'); // getting column index
var v = $(this).val(); // getting search input value
table.columns(index).search(v).draw();
});
$(".datepicker").datepicker({
dateFormat: "dd-mm-yy",
altFieldTimeOnly: false,
altFormat: "yy-mm-dd",
altTimeFormat: "h:m",
altField: "#tarih-db",
monthNames: ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"],
dayNamesMin: ["Pa", "Pt", "Sl", "Ça", "Pe", "Cu", "Ct"],
firstDay: 1,
dateFormat: "yy-mm-dd",
showOn: "button",
showAnim: 'slideDown',
showButtonPanel: true,
autoSize: true,
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: false,
buttonText: "Tarih Seçiniz",
closeText: "Temizle"
});
$(document).on("click", ".ui-datepicker-close", function () {
$('.datepicker').val("");
table.columns(5).search("").draw();
});
}
// For DropDown inputs
else if (index == 2) {
$(this).replaceWith('<th><select id="filter_comparator" class="styled-select yellow rounded"><option value="select">Seç</option><option value="eq">=</option><option value="gt">>=</option><option value="lt"><=</option><option value="ne">!=</option></select><input type="text" id="filter_value"></th>');
var selectedOperator;
$('#filter_comparator').on('change', function () {
var i = $(this).attr('id'); // getting column index
var v = $(this).val(); // getting search input value
selectedOperator = v;
if(v=="select")
table.columns(index).search('select|0').draw();
$('#filter_value').val("");
});
$('#filter_value').on('keyup click change', function () {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
var i = $(this).attr('id'); // getting column index
var v = $(this).val(); // getting search input value
table.columns(index).search(selectedOperator + '|' + v).draw();
}
});
}
})
}