选择一个选项将强制选择其他选项

时间:2012-11-08 14:12:41

标签: javascript selection option

例如,如果您选择id="chocolate-yes"id="vanilla-yes"选项,则也会选择id="icecreamcone-yes"选项。

如下图所示,当您选择id="chocolate-yes"选项时,<select id="icecreamcone">将被禁用。

如果未选择id="chocolate-yes"id="vanilla-yes",则不会禁用id="icecreamcone-no"选项。

  

用简单的话来说:如果你想添加香草或巧克力冰淇淋,你总是需要一个冰淇淋甜筒,除了洒水:)


有人知道可以做到这一点的Javascript吗?

注1:id="sprinkles-yes"选项不会影响id="icecreamcone-yes"
注意2:在选择id="icecreamcone-yes"id="vanilla-yes"之前,仍需要选择id="chocolate-yes" 注3:id名称不能更改,也不能为元素添加更多属性 注4:不能使用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>

2 个答案:

答案 0 :(得分:0)

使用JQuery

$('#icecreamcone').change(function() {
alert("There has been a change");
//Use Javascript to disable.
});

将#icecreamcone替换为您要监视更改事件的元素的选择ID。

唯一需要注意的是,禁用的表单元素不会提交,因此请将值存储在隐藏的输入标记中以提交它们。

答案 1 :(得分:0)

好的,这样的事可能会对你有所帮助:

​$( "select" )​.change(function() {
    if ( $( "#vanilla" ).val() == "yes" || $( "#chocolate" ).val() == "yes" )
        $( "#icecreamcone" ).val( "yes" );
    else
        $( "#icecreamcone" ).val( "addicecreamcone" );
});​

您可以尝试here