根据选择列表选项更新输入字段

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 显式，以便可以重用。

希望这可以帮助！