JSFiddle - React, Tailwind, and code Playground

by beirensg

HTML

<input type="text"  id="txt_quantity" style="width:70%" height="22px" value="1" />
<select class='select_class' id='select_1' name='optie[]' class='choice'>
        <option>Selecteer optie</option>
         <option value='10'>Test</option>
 </select>
<div id='tekst_1' style="border: 1px solid black">blabla</div>

JavaScript

function maak_select_aan(quantity){
     if (quantity<1){ //minimum
         alert('kies een getal groter dan 4');
         return false;
     }
     else{
         var current_number=$('select.select_class[name="optie[]"]').length; //huidig aantal select
         while (current_number>quantity){
         $('select#select_'+current_number).remove(); //delete last select
             $('div#tekst_'+current_number).remove();
         current_number--;
         }         
         while (current_number<quantity){
         
            $('select#select_1').clone().attr("id",'select_'+(current_number+1)).appendTo( $('select#select_1').parent()); //make new select and put in container of other selects
              $('div#tekst_1').clone().attr("id",'tekst_'+(current_number+1)).appendTo( $('div#tekst_1').parent());
             current_number++;         
         }
     }
 }
    

$("input#txt_quantity").change(function(){

    maak_select_aan($(this).val());
});
                                                              

 $('select.select_class[name="optie[]"]').live('change',function(){ //als de waarde verandert voer de functie uit
   var numberID =$(this).attr("id").substr($(this).attr("id").indexOf("_")+1); //zoek idnummer (na select_) van deze selectbox
     
   if ($(this).val()=='10'){
      $('div#tekst_'+numberID).show(); //tonen van tekst overeenkomstig met selectbox
   }
   else{
      $('div#tekst_'+numberID).hide(); //verbergen van tekst overeenkomstig met selectbox
   }
 });