2012-11-12 295 views
0

例如,如果您選擇id="chocolate-yes"id="vanilla-yes"的選項,則也會選擇帶有id="icecreamcone-yes"的選項。選擇一個選項將選擇其他選項


任何人都知道的Javascript可以做到這一點?

注1:id="sprinkles-yes"選項不會影響id="icecreamcone-yes"
注2:id名稱不能更改,也不能爲元素添加更多屬性。
注3:不能使用jQuery。


<ul id="icecream" style="list-style:none;line-height:30px;"> 
    <li> 
    <select id="icecreamcone"> 
     <option value="addicecreamcone">Would you like an ice cream cone?</option> 
     <option id="icecreamcone-yes" value="yes">Yes</option> 
     <option id="icecreamcone-no" value="no">No thanks</option> 
    </select> 
    </li> 
    <li> 
    <select id="vanilla"> 
     <option value="addvanilla">Would you like to add vanilla ice cream?</option> 
     <option id="vanilla-yes" value="yes">Yes</option> 
     <option id="vanilla-no" value="no">No thanks</option> 
    </select> 
    </li> 
    <li> 
    <select id="chocolate"> 
     <option value="addchocolate">Would you like to add chocolate ice cream?</option> 
     <option id="chocolate-yes" value="yes">Yes</option> 
     <option id="chocolate-no" value="no">No thanks</option> 
    </select> 
    </li> 
    <li> 
    <select id="sprinkles"> 
     <option value="addsprinkles">Would you like to add sprinkles on top?</option> 
     <option id="sprinkles-yes" value="yes">Yes</option> 
     <option id="sprinkles-no" value="no">No thanks</option> 
    </select> 
    </li> 
</ul> 

+3

正在做作業嗎? (*由於許多限制* *) –

回答

2

試試這個。

document.getElementById("chocolate").onchange = function(){ 
    if(document.getElementById("chocolate").options[1].selected == true) { 
    document.getElementById("icecreamcone").options[1].selected = true 
    } 
} 

當您選擇「選擇巧克力冰淇淋」爲「是」時,它會自動將「冰淇淋錐」設置爲「是」。

+0

感謝nxtwrld,但您的示例僅適用於選擇巧克力時,它不適用於香草。 – Macchiato

+0

只需複製它,用香草取代巧克力。 – nxtwrld

+0

是的,工作,謝謝。但是,例如,如果我有50種口味,你能告訴我如何用較少的代碼獲得相同的結果嗎? – Macchiato

相關問題