Hello, I need to change the second parameter depending on the first one. There are 5 input types - text, image, textarea, ckeditor, checkbox

And depending on the selected input type, display the required field - text, download field, etc.

I did it like this through show and hide, but it turned out to be a big identical code

$script = <<< JS $('.js-type').on('change',function(){ var selection = $(this).val(); switch(selection){ case "image": $("#image").show() $("#input").hide() $("#textarea").hide() $("#fck").hide() $("#checkbox").hide() break; case "input": $("#input").show() $("#image").hide() $("#textarea").hide() $("#fck").hide() $("#checkbox").hide() break; case "textarea": $("#textarea").show() $("#image").hide() $("#input").hide() $("#fck").hide() $("#checkbox").hide() break; case "fck": $("#fck").show() $("#textarea").hide() $("#image").hide() $("#input").hide() $("#checkbox").hide() break; case "checkbox": $("#checkbox").show() $("#image").hide() $("#textarea").hide() $("#fck").hide() $("#input").hide() break; } }); JS;

And forms

 <div id="input" style="display:none;"> <?= $form->field($model, 'value')->textInput(); ?> </div> <div id="image" style="display:none;"> <?= $form->field($model, 'value')->fileInput(); ?> </div> .....

How can another script be written ??

  • one
    Well, put all the fields in some div#wrap and just at the beginning of the script write $('div#wrap > div').hide() which will hide all these divs with id and $('div#'+ selection).show() will show - Alexey Shimansky

1 answer 1

Put all the fields in some div#wrap and just write at the beginning of the script

 $('div#wrap > div').hide()

that hide all these divas with aidish, and

 $('#'+ selection).show()

will show the desired field.

Example:

 $('.js-type').on('change', function() { var selection = $(this).val(); $('div#wrap > div').hide(); $("#"+selection).show(); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrap"> <div id="input" style="display:none;"> 111 </div> <div id="image" style="display:none;"> 222 </div> </div> <input type="text" class="js-type" />

We write input , press Enter and oplya!

Write the image , press Enter and oplya again!

special edition for vehicles using select :

  $('.js-type').on('change', function() { var selection = $(this).val(); $('div#wrap > div').hide(); $("#" + selection).show(); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrap"> <div id="input" style="display:none;"> input div </div> <div id="image" style="display:none;"> image div </div> </div> <select class="js-type"> <option>--none--</option> <option>input</option> <option>image</option> </select>

  • Thank you for the answer! But still I would like to be able to choose from the list - Vlad Shkuta
  • @VladShkuta in the sense of the list? well put instead of select select. I do not prohibit) - Alexey Shimansky
  • Thank you, I did not understand at first) - Vlad Shkuta
  • Just in case @VladShkuta added at the end. Use. - Alexey Shimansky