0

Есть простой список select с 3-мя пунктами:

1
2
3

Если выбрал 1й пункт из drop down list то ниже <br/><br/> появился один textbox, если выбрал 2й то тоже самое, но если выбрал 3й то появились 3 подряд textbox, как это сделать, что-то не понимаю(( как-то через .js реализовать? Такое динамическое изменение..

function SelectedItemFromDropDownListToBlock(e)
    {
        var selOpt = document.getElementById("ItemNameFromDropDownList");
        var result=e.options[e.selectedIndex].value;
        if(result>0)
        {
            var selectedItem=e.options[e.selectedIndex].text;
            ItemNameFromDropDownList.innerHTML=selectedItem;
        }
    }

//здесть jquery

$(document).on('change', '#selectOptions', function()
        {
            var id = $(this).val();
            $('.tt').hide();
            if (id == '3')
            {
                $('.tt').show()
            }
            else
                {
                $('.textbox_' + id).show()
            }
        })

<select id="selectOptions" name="selectOptions">
    <option value="" disabled selected>Выбрать из списка</option>
    <option value="1">Первый</option>
    <option value="2">Второй</option>
    <option value="3">Третий</option>
</select>


<div class="alltextbox">
    <div class="tt textbox_1"><input type="text" name="textbox1" placeholder="textbox 1"></div>
    <div class="tt textbox_2"><input type="text" name="textbox2" placeholder="textbox 2"></div>
    <div class="tt textbox_3"><input type="text" name="textbox3"  placeholder="textbox 3"></div>
</div>
0

2 ответа 2

0

var ar = ["Десять","Двадцать","Тридцать"];

$(document).on('change', '#my_select', function(e) {
  var id = $(this).val();
  var text = $(this).find('option:selected').text();
  $('.label').remove();
  $('.tt').hide();
  if (id == '3') {
    $.each($('#my_select').find('option'),function(key,value){
      //$('.textbox_' + key).prepend('<label class="label">' + $(this).text() + '</label>');
      $('.textbox_' + key).prepend('<label class="label">' + ar[key-1] + '</label>');
    })
    $('.tt').show();
  } else {
    $('.textbox_' + id).prepend('<label class="label">' + text + '</label>');
    $('.textbox_' + id).show();
  }
})
.tt {
  display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="my_select" name="my_select">
  <option value="">Выберите пункт</option>
  <option value="1">Один</option>
  <option value="2">Два</option>
  <option value="3">Три</option>
</select>

<div class="alltextbox">
  <div class="tt textbox_1"><input type="text" name="textbox1" placeholder="textbox 1"></div>
  <div class="tt textbox_2"><input type="text" name="textbox2" placeholder="textbox 2"></div>
  <div class="tt textbox_3"><input type="text" name="textbox3"  placeholder="textbox 3"></div>
</div>

18
  • Я имел ввиду не сами слова textbox1 а поле для ввода т.наз. textbox(input type="text">)
    – Rerynen
    16 июл 2019 в 11:55
  • Изменил в ответе textbox на input type="text" 16 июл 2019 в 15:54
  • А для чего 'change' ? Просто скрипт вставил и не функционирует почему-то (((
    – Rerynen
    16 июл 2019 в 19:35
  • Мой пример сделан с применением jquery.js. change - это событие изменения активного элемента select 16 июл 2019 в 19:54
  • Я понимаю, да, что с jquery.....:-(
    – Rerynen
    16 июл 2019 в 19:54
0

var open = [[], [0], [1], [0, 1, 2]];
/* Записываем в массив номера элементов, которые должна открыть каждая опция.
можно было записать для 1, 2, 3, но в JS счет начинается с нуля... привыкайте считать так.
опций всего 4, и первая ничего не открывает (пустой массив). */

var select = document.getElementById('select');
var txt = document.querySelectorAll('.txt');

select.addEventListener('change', function(){
  /* При смене опции, сперва перебираем все инпуты и скрываем всё */
  for( var i = 0; i < txt.length; i++ ){
    txt[i].classList.add('hidden');
  }

  var val = select.selectedIndex; // Находим номер выбранной опции (0, 1, 2, или 3)
  var opentxt = open[val]; // По этому номеру достаем массив чисел из общего массива

  console.clear(); console.log( '(Демо) Получили элемент: [' + opentxt.join(', ') + ']' );

  /* Допустим, получили 4-й массив [0, 1, 2] - перебираем его через цикл 
  и на каждом круге достаем его очередной элемент. opentxt[0] == 0, opentxt[1] == 1...
  этот же элемент, по совместительству, является номером инпута, который нужно показать. */
  for( var i = 0; i < opentxt.length; i++ ){
    txt[opentxt[i]].classList.remove('hidden');
  }
});
.txt {
  margin: 5px;
}

.hidden {
  display: none;
}
<select id="select">
  <option></option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<input class="txt hidden" placeholder="1...">
<input class="txt hidden" placeholder="2...">
<input class="txt hidden" placeholder="3...">

Ваш ответ

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

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