從下拉列表中選擇值的調用功能

Question

我有以下html代碼：

<select class="1-100"></select>

我正在使用Jquery填充上述select選項的值：

$(function(){
    var $select = $(".1-100");
    for (i=1;i<=100;i++){
        $select.append($('<option></option>').val(i).html(i))
    }
});

這使我的下拉菜單的值從1到100。當我從下拉菜單中選擇一個數字時，我想觸發一個函數。 該函數應返回我在下拉菜單中選擇的數字（顯示在窗口上）。 我如何做到這一點？

Answer 1

HTML：-

<select class="1-100"></select>
<textarea id="mytext"></textarea>

jQuery的：-

$('select.1-100').on('change',function(){
  alert($(this).val());
  $('#mytext').val($(this).val());
});

 $(function(){ var $select = $(".1-100"); for (i=1;i<=100;i++){ $select.append($('<option></option>').val(i).html(i)) } $('select.1-100').on('change',function(){ alert($(this).val()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="1-100"></select> 

Answer 2

html

<label></label>
<select class="1-100"></select>

在js中

$(function(){
    var $select = $(".1-100");
    for (i=1;i<=100;i++){
        $select.append('<option value="'+ i +'">'+ i +'</option>');
    }
     $('select').on('change',function(){
        $('label').text($(this).val());
    });
});

Answer 3

您可以嘗試附加on change處理程序：

 $(function() { var $select = $(".1-100"); for (i = 1; i <= 100; i++) { $select.append($('<option>').val(i).html(i)); } $select.on('change', function() { alert(this.value); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="1-100"></select> 

Answer 4

這可以通過使用<select>元素上的change事件來完成。

可以使用.val()來獲取<select>的值。

這是一個工作片段：

 $(function(){ var $select = $(".1-100"); for (i=1;i<=100;i++){ $select.append($('<option></option>').val(i).html(i)) } $(document).on('change', 'select', function(){ alert($(this).val()); $('span').text($(this).val()); $('textarea').val($(this).val()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label>Select a value: </label><select class="1-100"></select> <p>Selected value = <span></span></p> <textarea></textarea> 

• http://api.jquery.com/on/
• http://api.jquery.com/val/
• http://api.jquery.com/text/