Question

早上好，这个有点奇怪，但我想知道是否有办法有多个选择框，但你只能选择一个项目。示例：我有两个选择框（breakfast，lunch）。

在这些选择框中有不同的选项。

早餐有

鸡蛋
培根
Bagel
等

午餐有：

三明治
披萨
塔可
等。

假设用户在Eggs中选择了Breakfast。如果用户在Pizza中选择lunch，则Eggs中的breakfast将被取消选中，Pizza中的Lunch成为所选选项。

有没有办法实现这个目标？提前谢谢。

Answer 1

http://jsfiddle.net/6R58k/

$("form").find("select").change(function(){
    $(this).siblings("select").val("");
    // optionally $("form").find("select").not($(this)).val("");        
});

Answer 2

<select>
    <optgroup label="Breakfast">
        <option value="Eggs">Eggs</option>
        <option value="Bacon">Bacon</option>
    </optgroup>
    <optgroup label="Lunch">
        <option value="Sandwich">Sandwich</option>
        <option value="Pizza">Pizza</option>
    </optgroup>
</select>

Answer 3

http://jsfiddle.net/FnXPy/

$(function($){
    $(".meal").on("change", function() {
        var me = $(this);
        $(".meal").each(function() {
            if(me.attr("id") != $(this).attr("id")) {
                $(this).val("");
            }
        });
    });
});

使用类而不是DOM结构的变体来查找相关的选择。

Answer 4

好的，你可以使用

<form class="form" action="#">
  Breakfast has : <br>
  <input type="checkbox" name="Breakfast" value="Eggs"> Eggs<br>
  <input type="checkbox" name="Breakfast" value="Bacon"> Bacon<br>
  <input type="checkbox" name="Breakfast" value="Bagel"> Bagel<br>
  Lunch has:<br>
  <input type="checkbox" name="Lunch" value="Sandwich"> Sandwich<br>
  <input type="checkbox" name="Lunch" value="Pizza"> Pizza<br>
  <input type="checkbox" name="Lunch" value="Taco"> Taco<br>
  <input type="submit" value="Submit">
</form>

然后：

$(".form:checked") //do anything ;

多个选择框但只允许在它们之间进行一次选择

4 个答案: