jQuery get value of select onChange
我的印象是我可以通过执行此
它似乎只有在我引用ID时才有效。
我该怎么做呢。
试试这个-
1 2 3 | $('select').on('change', function() { alert( this.value ); }); |
1 2 3 4 5 6 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <select> <option value="1">One</option> <option value="2">Two</option> </select> |
你也可以参考onchange事件 -
1 2 3 4 | function getval(sel) { alert(sel.value); } |
1 2 3 4 | <select onchange="getval(this);"> <option value="1">One</option> <option value="2">Two</option> </select> |
I was under the impression that I could get the value of a select
input by doing this $(this).val();
如果您不引人注意地订阅(这是推荐的方法)，这是有效的：
1 2 3 | $('#id_of_field').change(function() { // $(this).val() will work here }); |
如果您使用
1 | onselect="foo(this);" |
然后：
1 2 3 | function foo(element) { // $(element).val() will give you what you are looking for } |
这对我有帮助。
对于选择：
1 2 3 | $('select_tags').on('change', function() { alert( $(this).find(":selected").val() ); }); |
对于收音机/复选框：
1 2 3 | $('radio_tags').on('change', function() { alert( $(this).find(":checked").val() ); }); |
尝试使用事件委派方法，几乎??适用于所有情况。
1 2 3 4 | $(document.body).on('change',"#selectID",function (e) { //doStuff var optVal= $("#selectID option:selected").val(); }); |
你可以尝试这个(使用jQuery) -
1 2 3 4 | $('select').on('change', function() { alert( this.value ); }); |
1 2 3 4 5 6 7 8 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> <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-
1 2 3 4 | function getNewVal(item) { alert(item.value); } |
1 2 3 4 5 6 | <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> |
对于所有选择，请调用此函数。
1 2 3 4 | $('select').on('change', function() { alert( this.value ); }); |
仅限一个选择：
1 | $('#select_id') |
这对我有用。在没有运气的情况下尝试其他一切：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <html> <head> Example: Change event on a select <script type="text/javascript"> function changeEventHandler(event) { alert('You like ' + event.target.value + ' ice cream.'); } </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
箭头功能的范围与功能不同，
修复使用
1 2 3 | $('select').on('change',(event) => { alert( event.target.value ); }); |
寻找jQuery网站
HTML：
1 2 3 4 5 6 7 8 9 | <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> Trigger the handler |
JAVASCRIPT：
1 2 3 | $(".target" ).change(function() { alert("Handler for .change() called." ); }); |
jQuery的例子：
要为所有文本输入元素添加有效性测试：
1 2 3 | $("input[type='text']" ).change(function() { // Check input( $( this ).val() ) for validity here }); |
1 2 3 4 | $('select_id').on('change', function() { alert(this.value); //or alert($(this).val()); }); |
1 2 3 4 5 6 7 8 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> <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> |
jQuery使用Change事件获取select html元素的值
对于演示和更多示例
1 2 3 4 5 | $(document).ready(function () { $('body').on('change','#select_box', function() { $('#show_only').val(this.value); }); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> jQuery Select OnChnage Method <head> <script src="https://code.jquery.com/jquery-3.3.1.min.js"> </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> <input type="text" id="show_only" disabled=""> </body> </html> |
请注意，如果这些不起作用，可能是因为DOM尚未加载且您的元素尚未找到。
要修复，请将脚本放在正文末尾或准备好文档
1 2 3 4 5 | $.ready(function() { $("select").on('change', function(ret) { console.log(ret.target.value) } }) |
我想补充一下，
谁需要完整的自定义标题功能
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | 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(); } }); } }) } |
1 2 3 4 5 6 7 8 | jQuery(document).ready(function(){ jQuery("#id").change(function() { var value = jQuery(this).children(":selected").attr("value"); alert(value); }); }) |