从2个下拉菜单中仅选择一个选项

时间:2016-03-14 12:47:52

标签: jquery html forms drop-down-menu

花了1天寻找正确的答案,找不到它。

所以问题是我有2个下拉菜单。所以我需要的是 - 如果用户从第一个下拉列表中选择选项,则第二个下拉列表的选项将变为默认值,与第二个下拉列表相同,如果用户从第二个下拉列表中选择该选项,则第一个下拉列表将变为默认值。

这是代码:

<ul ondrop="drop(event)" ondragover="allowDrop(event)">
    <li class="item" draggable="true" ondragstart="dragStart(event)" ondrag="dragging(event)">
        <div class="product-infos">
            <a href="javascript:;"></a>
        </div>
    </li>
</ul>

提前感谢所有人。

2 个答案:

答案 0 :(得分:1)

你可以尝试这样的事情:

$(document).on("change", ".selectCar", function(e){
  $('.selectPrice').val('default');
});

$(document).on("change", ".selectPrice", function(e){
    $('.selectCar').val('default');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Cars<br /><select class='selectCar' style="width: 50%;">
 <option value="default">---</option>
  <option value="volvo" >Volvo</option>
  <option value="saab" >Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select></p>


<p>Euro<br /><select class='selectPrice' style="width: 50%;">
 <option value="default">---</option>
  <option value="10">10 Euro</option>
  <option value="20">25 Euro</option>
  <option value="50">50 Euro</option>
  <option value="100">100 Euro</option>
</select></p>

答案 1 :(得分:0)

试试这个

HTML

 <p>
            Cars<br /><select id="select1" style="width: 50%;">
                <option value="-1">---</option>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
            </select>
        </p>


        <p>
            Euro<br /><select id="select2" style="width: 50%;">
                          <option value="-1">---</option>
        <option value="10">10 Euro</option>
        <option value="20">25 Euro</option>
        <option value="50">50 Euro</option>
        <option value="100">100 Euro</option>
    </select>
        </p>

Jquery的

$(document).ready(function () {
    $('#select1').change(function () {
        var $val = $(this).find(":selected").val();
        if ($val != '-1');
        $('#select2').val('-1');
    });
    $('#select2').change(function () {
        var $val = $(this).find(":selected").val();
        if ($val != '-1');
        $('#select1').val('-1');
    });
});