Home / Questions / 562214
Accepted
Kevin Carrascal
Asked: 2022-10-14 21:58:28 +0800 CST 2022-10-14 21:58:28 +0800 CST

Create options according to value entered in input

  • 772

I would like to know how I can create options of a select according to the number that I fill in an input, that is to say that in my default input it is with 1 but if I put 4 then my select should be like this

<h4>COMO DEBERIA DE ESTAR INICIALMENTE</h4>
<input name="" id="" class="form-control" type="text" autocomplete="off" value="1">
<select id="opciones">
<option value="valor_1">valor 1</option>
</select>
<br>
<h4>COMO DEBERIA DE QUEDAR SI LLENO EL INPUT CON OTRO VALOR</h4>
<input name="" id="" class="form-control" type="text" autocomplete="off" value="4">
<select id="opciones">
<option value="valor_1">valor 1</option>
<option value="valor_1">valor 2</option>
<option value="valor_1">valor 3</option>
<option value="valor_1">valor 4</option>
</select>

javascript

2 Answers

  1. Best Answer

    First of all, you have to add an "id" to the input so you can reference it in javascript. Once you have that, you create a "change" event so that when the value of the input changes, the content of the function that will fill the select is executed. First you empty it with the method .empty(), then you simply create a for from 1 to the amount you have put in the input and add the option. Take a good look at how @masterguru has told you that the value must vary for each option, it makes no sense to put the same value because whatever you choose in the select, it would always return the same value.

    Greetings.

    jQuery("#miinput").on("change", function() {
    var cantidad = parseInt(jQuery(this).val());
    jQuery("#opciones").empty();
    for (i = 1; i <= cantidad; i++) {
        jQuery("#opciones").append('<option value="valor_' + i + '">valor ' + i + '</option>"');
    }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="" id="miinput" class="form-control" type="text" autocomplete="off" value="1">
<select id="opciones">
<option value="valor_1">valor 1</option>
</select>

    • 1

  2. Something like that?

    $("#num").keyup (function() {
   $("#opciones").html("");
   let html = "";
   let rep = parseInt ($(this).val())+1;
   for (i=1;i<rep;i++){
      html = html + `<option value="valor_1">valor ${i}</option>`
   }
   $("#opciones").html(html);
 });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4>select</h4>
<input name="" id="num" class="form-control" type="text" autocomplete="off" value="1">
<select id="opciones">
<option value="valor_1">valor 1</option>
</select>
<br>

    • 0