根據選擇列表選項更新輸入字段

Question

我有以下 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顯示為 select 列表的第一個選項。 然后我需要做的是獲取該值並將其顯示在input字段中。 用戶的后續選擇，即他/她選擇了Mr ，也必須更新這個輸入字段。

我希望我能在 jQuery 中做到這一點，但我不確定如何獲得這些值。

謝謝

Answer 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());
    });
});

這是一個現場演示。

Answer 2

<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 值就不需要輸入字段

Answer 3

除了已經提供的 awnsers 之外，我還建議以下內容，以在加載時使用復選框的默認值填充輸入字段。 在 Darin 代碼的第 4 行和第 5 行之間插入類似這樣的內容：

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

或考慮使更改回調 function 顯式，以便可以重用。

希望這可以幫助！