ドロップダウンの特定の値が選択されると、別のドロップダウン選択を変更します

Question

ユーザーがドロップダウンメニューで特定の値を選択するかどうかを確認する必要があります。その値が選択されている場合は、別のドロップダウンメニューの選択を変更する必要があります。

最初のドロップダウンのhtmlです。 [四半期]が選択されている場合は、2番目のドロップダウンで四半期を選択する必要があります。他に何かが選択されても、変更はありません。

<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> 

Answer 1

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

ここでは、コードのjsFiddle。

Answer 2

そのような何か：

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

とJavaScriptで：

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

} 

Answer 3

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

を}）;

Answer 4

あなたは一つの値だけ（四半期）に基づいてマッチを求め、将来的には、あなたがハードコーディングを回避し、このようなものを使用することができ、自動選択を起こす必要がある追加の項目を追加する可能性がある場合：

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

を

また、私はあなたがこの加算を使用することができ、その場合には、一致がある場合は2番目のドロップダウンを無効にすることを決定見ることができる：参考

$('#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