Взаимодействие select и input

03 октября 2021, 17:10

У меня есть следующий select:

<div>
                                        <select>
                                            <option value="">Пункт 1</option>
                                            <option value="">Пункт 2</option>
                                            <option value="">Другое</option>
                                        </select>
                                    </div>

Нужно реализовать следующую функцию: Т.е. при выборе пункта "другое", текст внутри select должен пропасть и должна появиться возможность ввода информации с клавиатуры. Но! При этом возможность выбора других пунктов у select должна остаться. Такой механизм реально реализовать? И если да, то с чего начать?...

Answer 1

Так вам нужно было?

$(document).on('change', 'select', function() { 
  if ($(this).val() == 3) { 
    $('input[name="other"]').show().focus(); 
  } else { 
    $('input[name="other"]').hide(); 
  } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div> 
  <select> 
    <option value="1">Пункт 1</option> 
    <option value="2">Пункт 2</option> 
    <option value="3">Другое</option> 
  </select> 
  <input name="other" value="" style="display: none;" /> 
</div>