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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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