обновление поля ввода на основе опции selectlist

#javascript #jquery

#javascript #jquery

Вопрос:

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

 <select name="title" id="title">
  <option value="Mrs" >Mrs</option>
  <option value="Mr" >Mr</option>
  <option value="Miss" >Miss</option>
  <option value="Dr" >Dr</option>
</select>

<input type="text" name="gtitle" id="gift_title" value="" />
  

Теперь по умолчанию Mrs отображается как первая опция списка выбора. Что мне нужно сделать затем, так это получить это значение и отобразить его в input поле. Последующие выборки пользователя, то есть выбранные им Mr , также должны обновлять это поле ввода.

Я надеялся, что смогу это сделать в jQuery, но я не был уверен, как получить эти значения.

Спасибо

Ответ №1:

Вы могли бы подписаться на .change() событие выпадающего списка и обновить значение ввода:

 $(function() {
    // initialize the value of the input field to the selected value
    // of the dropdown list:
    $('#gift_title').val($('#title').val());

    $('#title').change(function() {
        // when the value of the dropdown list changes
        // update the input field
        $('#gift_title').val($(this).val());
    });
});
  

И вот живая демонстрация.

Комментарии:

1. Я предлагаю использовать this.value вместо $ (this).val(), но они оба работают

Ответ №2:

В дополнение к уже предоставленным настройкам я предлагаю следующее: заполнить поле ввода значением флажка по умолчанию при загрузке. Вставьте что-то вроде этого между строками 4 и 5 кода Дарина:

 $('#gift_title').val($('#title').val());
  

или рассмотрите возможность явного изменения функции обратного вызова, чтобы ее можно было использовать повторно.

Надеюсь, это поможет!

Ответ №3:

 <select name="title" id="title">
  <option value="Mrs" >Mrs</option>
  <option value="Mr" >Mr</option>
  <option value="Miss" >Miss</option>
  <option value="Dr" >Dr</option>
</select>

<input type="text" name="gtitle" id="gift_title" value="Mrs" />
  

Я добавил значение по умолчанию в html

 $('#title').change(function(){
    $('#gift_title').val(this.value);
});
  

рабочая демонстрация

но я не вижу никакой причины для этого, просто используйте значение select при отправке, не должно быть необходимости в поле ввода