从下拉列表中调用所选值的函数

Calling function on selected value from drop down list

本文关键字：函数 下拉列表 调用      更新时间：2023-09-26

我有以下html代码：

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

我正在使用Jquery来填充上述选择选项的值：

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

这给了我一个从 1 到 100 的值的下拉列表。我想在从此下拉列表中选择一个数字时触发一个函数。该函数应返回我在下拉列表中选择的数字(显示在窗口中(。我是如何做到这一点的？

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>

您可以尝试附加 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>

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());
    });
});

这可以使用 <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/
相关文章：