更新基础上选择列表的选项

一个输入字段我有以下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中做到这一点，但我不知道如何获得这些值。

感谢

来源

2011-05-27 terrid25

你可以认购.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()); 
    }); 
});

而且这里有一个live demo。

来源

2011-05-27 12:19:06

这工作完美，正是我一直在寻找！ – terrid25 2011-05-27 12:25:32

我建议使用this.value而不是$（this）.val（），但它们都可以工作 – mcgrailm 2011-05-27 12:28:37

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

working demo

，但我看不出这只是使用选择值，当您提交应该不需要输入费尔德任何理由

来源

2011-05-27 12:19:27 mcgrailm

除了已经提供的awnsers之外，我还提出了以下建议，在加载时使用复选框的默认值填充输入字段。插入像这样的Darin的代码行4和5之间：

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

或考虑作出改变回调函数明确的，因此它可以被重用。

希望这会有所帮助！

来源

2011-05-27 12:23:11 kraenhansen

更新基础上选择列表的选项

回答

相关问题