當選擇某個下拉列表的某個值時，請更改不同的下拉列表選項

我需要檢查用戶是否在下拉菜單中選擇了某個值。如果選擇該值，我需要它來更改另一個下拉菜單的選擇。當選擇某個下拉列表的某個值時，請更改不同的下拉列表選項

這是第一個下拉列表的html。如果選擇Quarterly，則需要在第二個下拉列表中選擇Quarterly。如果選擇了其他內容，則不會有變化。

<select id="frequency" name="frequency"> 
    <option selected="selected" value="">Select One</option> 
    <option value="Monthly">Monthly</option> 
    <option value="Quarterly">Quarterly (1 Year Minimum, 4 deliveries)</option> 
</select> 


    <select id="MonthPlan" name="MonthPlan"> 
     <option selected="selected" value="">Select One</option> 
     <option value="3Months">3 Months</option> 
     <option value="6Months">6 Months</option> 
     <option value="9Months">9 Months</option> 
     <option value="12Months">12 Months</option> 
     <option value="Quarterly">Quarterly (1 Year Minimum, 4 deliveries)</option> 
    </select>

來源

2011-11-07 josh

$('#frequency').change(function(){ 
    if($(this).val() === 'Quarterly'){ 
     $('#MonthPlan').val('Quarterly'); 
    } 
});

這裏一個代碼jsFiddle。

來源

2011-11-07 20:44:45 topek

類似的東西：

<select id="frequency" name="frequency" onChange="selectChange()">

而且在javascript：

function selectChange() 
{ 
    if($("#frequencyoption:selected").val() == "Quarterly") 
     $("#frequencyoption").val("Quarterly"); 

}

來源

2011-11-07 20:42:56 GregM

恕我直言，所有的事件處理應該在['$ .change（）']（http://api.jquery.com/change/）API的js中。這將更容易維護 – JMax

當你已經使用jQuery時，你不應該內聯綁定事件，特別是不要綁定事件，參見[unobtrusive Javascript]（http://en.wikipedia.org/wiki/Unobtrusive_JavaScript） – topek

檢查出來http://jsfiddle.net/fQZwb/

或者只是jQuery代碼：

$(document).ready(function(){ 

var frequency = $('#frequency'); 
var MonthPlan = $('#MonthPlan'); 

frequency.bind("change", function(){ 
    if ($(this).val() == 'Quarterly') { 
     MonthPlan.find('option[value="Quarterly"]').attr('selected', 'selected'); 
    } else { 
     MonthPlan.find('option[value=""]').attr('selected', 'selected'); 
    } 
});

}）;

來源

2011-11-07 20:48:05 Maksym

你只要求匹配基於一個值（季）度，但如果將來您可以添加這應該引起自動選擇你能避免硬編碼和使用這樣的附加項目：

$('#frequency').change(function() { 
    var frequency = this.value; 
    $('#MonthPlan option').each(function() { 
     if (this.value === frequency) { 
      $('#MonthPlan').val(this.value); 
     } 
    }); 
});

而且，我可以看到你決定禁用第二個下拉如果有匹配，在這種情況下，你可以使用這個加法：

$('#frequency').change(function() { 
    var frequency = this.value; 
    $('#MonthPlan option').each(function() { 
     var monthPlan = $('#MonthPlan'); 
     monthPlan.removeAttr('disabled'); 

     if (this.value === frequency) { 
      monthPlan.val(this.value); 
      monthPlan.attr('disabled', 'disabled'); 
     } 
    }); 
});

參考：the jsFiddle of this method

來源

2011-11-07 20:50:35

當選擇某個下拉列表的某個值時，請更改不同的下拉列表選項

回答

相關問題