Câu trả lời:
Thử cái này-
$('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>Bạn cũng có thể tham khảo với sự kiện onchange-
function getval(sel)
{
alert(sel.value);
}<select onchange="getval(this);">
<option value="1">One</option>
<option value="2">Two</option>
</select>.change()phím tắt thay thế.
Tôi có ấn tượng rằng tôi có thể nhận được giá trị của một đầu vào được chọn bằng cách thực hiện $ (this) .val ();
Điều này hoạt động nếu bạn đăng ký không phô trương (đó là cách tiếp cận được đề xuất):
$('#id_of_field').change(function() {
// $(this).val() will work here
});nếu bạn sử dụng onselectvà trộn đánh dấu với tập lệnh, bạn cần chuyển tham chiếu đến phần tử hiện tại:
onselect="foo(this);"và sau đó:
function foo(element) {
// $(element).val() will give you what you are looking for
}Bạn có thể thử điều này (sử dụng 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>Hoặc bạn có thể sử dụng Javascript đơn giản như thế này-
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>Hàm mũi tên có phạm vi khác với hàm,
this.valuesẽ không xác định cho hàm mũi tên. Để sửa lỗi sử dụng
$('select').on('change',(event) => {
alert( event.target.value );
});Đây là những gì làm việc cho tôi. Đã thử mọi thứ khác mà không gặp may mắn:
<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>Lấy từ Mozilla
Tìm trang web 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." );
});Ví dụ của jQuery:
Để thêm kiểm tra tính hợp lệ cho tất cả các yếu tố nhập văn bản:
$( "input[type='text']" ).change(function() {
// Check input( $( this ).val() ) for validity here
});jQuery nhận giá trị của các phần tử html được chọn bằng cách sử dụng trên Change event
Đối với bản demo và ví dụ khác
$(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> Lưu ý rằng nếu những thứ này không hoạt động, có thể là do DOM chưa được tải và phần tử của bạn chưa được tìm thấy.
Để khắc phục, hãy đặt tập lệnh ở cuối phần thân hoặc sử dụng tài liệu đã sẵn sàng
$.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);
});
})Hãy để tôi chia sẻ một ví dụ mà tôi đã phát triển với BS4, thymeleaf và Spring boot.
Tôi đang sử dụng hai CHỌN, trong đó phần thứ hai ("chủ đề phụ") được điền bởi một lệnh gọi AJAX dựa trên lựa chọn của phần thứ nhất ("chủ đề").
Đầu tiên, đoạn trích tuyến ức:
<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 -->Tôi đang lặp lại một danh sách các chủ đề được lưu trữ trong ngữ cảnh mô hình, hiển thị tất cả các nhóm có chủ đề của chúng và sau đó tất cả các chủ đề không có nhóm. BaseIdentity là một khóa tổng hợp @Embedded BTW.
Bây giờ, đây là jQuery xử lý các thay đổi:
$('#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 definedCuộc gọi thay đổi ban đầu () đảm bảo rằng nó sẽ được thực hiện khi tải lại trang hoặc nếu một giá trị đã được chọn trước bởi một số khởi tạo trong phần phụ trợ.
BTW: Tôi đang sử dụng xác thực mẫu "thủ công" (xem "hợp lệ" / "không hợp lệ"), vì tôi (và người dùng) không thích rằng BS4 đánh dấu các trường trống không yêu cầu là màu xanh lá cây. Nhưng đó là phạm vi của Q này và nếu bạn quan tâm thì tôi cũng có thể đăng nó.
Tôi muốn thêm, người cần chức năng tiêu đề tùy chỉnh đầy đủ
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();
}
});
}
})
}