Question

我有以下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的值的下拉列表。我想在从这个下拉列表中选择一个数字时触发一个函数。该函数应返回我在下拉列表中选择的数字（显示在窗口中）。我是如何做到这一点的？

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

＆＃13;

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

＆＃13;

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

＆＃13;

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处理程序：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

这可以使用change元素上的<select>事件来完成。

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

这是一个工作片段：

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

从下拉列表中调用所选值的功能

4 个答案: