jQuery获取选择onChange的值

我的印象是，我可以通过执行此$(this).val();并将onchange参数应用于选择字段来获取选择输入的值。

它似乎只有在我引用ID时才有效。

我怎么用这个做呢？

2691427 次浏览
小开
最佳答案

试试这个

$('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>

您也可以使用onchange事件-

function getval(sel){alert(sel.value);}
<select onchange="getval(this);"><option value="1">One</option><option value="2">Two</option></select>

小开

我的印象是，我可以得到一个选择的值通过执行此操作输入$（this）. val（）；

如果你不显眼地订阅（这是推荐的方法），这是有效的：

$('#id_of_field').change(function() {// $(this).val() will work here});

如果您使用onselect并将标记与脚本混合，则需要传递对当前元素的引用：

onselect="foo(this);"

然后：

function foo(element) {// $(element).val() will give you what you are looking for}
小开

查找jQuery网站

超文本标记语言：

<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." );});

jQuery的例子：

要向所有文本输入元素添加有效性测试：

$( "input[type='text']" ).change(function() {// Check input( $( this ).val() ) for validity here});
小开

尝试事件委托方法，这在几乎所有情况下都有效。

$(document.body).on('change',"#selectID",function (e) {//doStuffvar optVal= $("#selectID option:selected").val();});
小开

这对我有帮助。

对于选择：

$('select_tags').on('change', function() {alert( $(this).find(":selected").val() );});

对于单选/复选框：

$('radio_tags').on('change', function() {alert( $(this).find(":checked").val() );});
小开

这就是我的工作。尝试了所有其他没有运气：

<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>

取自Mozilla

小开

你可以试试这个（使用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>

或者你可以像这样使用简单的Javascript

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>
小开

对于所有选择，调用此函数。

$('select').on('change', function(){alert( this.value );});

对于只有一个选择：

$('#select_id')
小开

请注意，如果这些不起作用，可能是因为DOM尚未加载并且您的元素尚未找到。

要修复，请将脚本放在正文末尾或使用文档就绪

$.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);
});})
小开

箭头函数的作用域与函数不同，this.value将给箭头函数未定义。修复使用

$('select').on('change',(event) => {alert( event.target.value );});
小开

我想补充一下，谁需要完整的自定义标头功能

   function addSearchControls(json) {$("#tblCalls thead").append($("#tblCalls thead tr:first").clone());$("#tblCalls thead tr:eq(1) th").each(function (index) {// For text inputsif (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 inputselse 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 indexvar v = $(this).val();  // getting search input valuetable.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 inputselse 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">&gt;=</option><option value="lt">&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 indexvar v = $(this).val();  // getting search input valueselectedOperator = 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 indexvar v = $(this).val();  // getting search input valuetable.columns(index).search(selectedOperator + '|' + v).draw();}});}})
}
小开

jQuery获取在Change事件上使用的选择html元素的值

演示和更多示例

$(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>

小开

让我分享一个我使用BS4、Thymeleaf和Spring Boot开发的示例。

我使用了两个SELECT，其中第二个（“子主题”）由基于第一个（“主题”）的选择的AJAX调用填充。

首先，胸腺叶片段：

 <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="" selectedth: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="" disabledth: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 -->

我正在迭代存储在模型上下文中的主题列表，显示所有组及其主题，然后显示所有没有组的主题。BaseIdent是一个@Embedded复合键BTW。

现在，这是处理更改的jQuery：

$('#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 firstfor (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 defined

Change（）的初始调用确保它将在页面重新加载时执行，或者如果后端的一些初始化已经预选了一个值。

顺便说一句：我正在使用“手动”表单验证（参见“is-有效”/“is-无效”），因为我（和用户）不喜欢BS4将非必需的空字段标记为绿色。但这就是这个Q的范围，如果你有兴趣，那么我也可以发布它。

小开

仅与js

 let select=document.querySelectorAll('select')select.forEach(function(el) {el.onchange =  function(){alert(this.value);      
}})
小开 
$('#select-id').change(function() {console.log($(this).val());});
小开

我有一个例子来帮助新的想法。希望对大家有帮助

$('#editpricelist_box').change(function ($e){$('input[name="edit_unit_price"]').val(parseFloat(this.val()).toFixed(2));console.log(this.val());});

提交答案