1

Здравствуйте, мне нужно сделать смену второго параметра в зависимости от первого. Есть 5 типов ввода - text, image, textarea, ckeditor, checkbox

И в зависимости от выбранного типа ввода, выводить нужное поле - текстовое,поле загрузки и т.д.

Сделал вот так через show и hide, но получился большой одинаковый код

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

И формы

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

Как можно по другому записать такой скрипт??

1
  • 1
    Ну поместите все поля в какой-нибудь div#wrap и просто в начале скрипта написать $('div#wrap > div').hide() что спрячет все эти дивы с айдишниками а $('div#'+ selection).show() покажет 17 сен 2016 в 8:43

1 ответ 1

4

Поместите все поля в какой-нибудь div#wrap и просто в начале скрипта пишите

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

что спрячет все эти дивы с айдишниками, а

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

покажет нужное поле.

Пример:

$('.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" />

Пишем input, нажимаем Enter и опля!

Пишем image, нажимаем Enter и опля снова!


спешл эдишн для ТС с применением 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>

4
  • Спасбо за ответ! Но все же хотелось бы чтобы была возможность выбора из списка 17 сен 2016 в 9:01
  • @VladShkuta в смысле из списка? ну поставьте вместо инпута select. Я же не запрещаю) 17 сен 2016 в 9:03
  • Спасибо, не понял сначала ) 17 сен 2016 в 9:06
  • @VladShkuta на всякий случай дописал в конце. Пользуйтесь. 17 сен 2016 в 9:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.