更新基礎上選擇列表的選項

一個輸入字段我有以下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

更新基礎上選擇列表的選項

回答

相關問題