选择选项将选择其他选项

Question

例如，如果您选择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>

Answer 1

试试这个。

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

当您选择Chocolate IceCream为Yes时，它会自动将Icecrem Cone设置为Yes。