他のドロップダウンの選択に基づいて1つのドロップダウンを動的に設定する

Question

性別（男性または女性）を選択するためのドロップダウンボタンと、婚姻状態を選択するためのもう1つのドロップダウンボタンがあります。男性として性別を選択すると、その配偶者の有無は、ボタンが出て表示されるはずのドロップダウン

：

• 未婚
• は離婚
• と結婚し、
• 男やもめ

女性として性別を選択するとき、婚姻ステータスドロップダウンボタンはp

が離婚結婚

• 未婚
• 、および
• 未亡人ボタン最初のドロップダウン、ボタン2番目のドロップダウンの内容がすべきでは選択に基づいて

：opulate変化する。

誰でも私の手伝いをすることはできますか？

Answer 1

UPDATE： id="gender"追加して、最初にonchange="updateMaritalStatus(this)"は、オンロード/のonchange

function updateMaritalStatus(o){ 

    var gen = document.getElementById("gender"), marital_status = ""; 

    if(o){ 
     marital_status = o.value == "m" ? " widower" : "widow" 
    }else{ 
    marital_status = gen.selectedIndex == 0 ? "widower" : "widow"; 
    } 
    document.getElementById("marital").lastChild.text = marital_status; 
    } 

アドオンのために1行に

<select id="marital"><option>Unmarried</option><option>Married</option><option>Divorced</option><option>Widow</option></select> 

機能を第2の選択オプションを保つ

<select id="gender" onchange="updateMaritalStatus(this)"> 

を選択onloadちゃん未亡人/寡婦

window.onload = function(){updateMaritalStatus()}; 

Answer 2

なぜ使用しないのですか未使用？それは他の選択の時制と一致します。

Answer 3

リスト全体を切り替える代わりに、代わりに最後の要素を切り替えるのはどうですか？

<select> 
    <option class="gender" value="m">Male</option> 
    <option class="gender" value="f">Female</option> 
</select> 

<select id="marital"> 
    <option>Unmarried</option> 
    <option>Married</option> 
    <option>Divorced</option> 
    <option>Widow</option> 
</select> 

さて、Javascriptを簡素化するためにjQueryを使用して（あなたが好むならば、あなたは純粋なJSに変換することができます）：あなたが探している効果を作成する必要があります

$('.gender').click(function(){ 
    var w = $('#marital').children().last(); 

    if($(this).attr('value') == 'm') 
    { 
     w.text('Widower'); 
    } 
    else 
    { 
     w.text('Widow'); 
    } 
}); 

を。