Выберите только один вариант из 2 выпадающих списков

Question

Проведенный 1 день ищет правильный ответ, не смог его найти.

Так что проблема в том, что у меня есть 2 выпадающих меню. Так что мне нужно - если пользователь выберет опцию из первого раскрывающегося списка, второй вариант выпадающего списка будет по умолчанию и тот же со вторым выпадающим списком, если пользователь выберет опцию из вторых выпадающих меню, первое раскрывающееся меню переходит к умолчанию.

Вот код:

<p>Cars<br /><select style="width: 50%;"> 
 
<option>---</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 style="width: 50%;"> 
 
<option>---</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>

Спасибо всем заранее.

Answer 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>

Answer 2

Попробуйте один

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'); 
    }); 
});