Question

我有输入字段 <input class="form-control" type="number" id="val-level" name="st_no" value="<?php echo $st_no; ?>" max="10" min="1" placeholder="How Many Levels..">

并拥有Jquery功能

$(document).ready(function() {
     var level_value = $("#val-level").val();

        $("#val-level").on("change",function(){
            level_value = $(this).val()

             var option = '';
            for (var i=0;i<level_value;i++){
option += '<option value="'+ level_value + '">' + level_value + '</option>';
                                        }
                $('#val-skill2').append(option);    
                });


 });

如果我在输入字段上插入3并且当更改为2时填充1,2，我想填充选项元素，如1,2,3。等等

我的下拉列表

<select class="form-control" id="val-skill2" name="level">
        <option value="" selected disabled>Select Level</option>

      </select>
  <label for="val-skill2">Levels</label>

Answer 1

这一行option += '<option value="' + level_value + '">' + level_value + '</option>';的问题之一就是它在每个选项中写入输入的值，改为使用i。
我做的另一件事是在输入改变时清除选择选项

＆＃13;

$(document).ready(function() {
  var level_value = $("#val-level").val();

  $("#val-level").on("change", function() {
    level_value = parseInt($(this).val())
$('#val-skill2 option').remove()
    var option = '';
    for (var i = 1; i < level_value +1; i++) {
      option += '<option value="' + i + '">' + i + '</option>';
    }
    $('#val-skill2').append(option);
  });


});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="form-control" type="number" id="val-level" name="st_no" value="" max="10" min="1" placeholder="How Many Levels..">

<select id="val-skill2"></select>

＆＃13;

使用jQuery填充输入值onchange的下拉选择元素

1 个答案: