Populate ausgewählten Drop-Down-Elemente mit Eingabewert Onchange jQuery

Question

ich habe Eingabefeld <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..">

Und haben Jquery Funktion

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


}); 

Ich möchte Option Elemente wie 1,2,3 bevölkern, wenn ich 3 einfügen auf Eingabefeld und wenn Änderung zu 2 bevölkern 1,2. und so weiter

Mein Dropdown

<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

• Eines der Probleme, was diese Linie option += '<option value="' + level_value + '">' + level_value + '</option>';, es würde immer den Wert der Eingabe in jeder Option zu schreiben, verwenden i statt.

• Eine andere Sache, die ich tat, war die Select-Option zu deaktivieren, wenn der Eingang

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

 

 
});

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