Anderen Drop-Down-Wert ändern, wenn die aktuelle geändert wird

Question

Ich habe 3 Dropdown-Menüs auf einer einzelnen Seite, Szenario ist, wenn einer der 3 Drop-Down-Wert geändert wird als verbleibende muss Standardwert festgelegt werden. Wie kann ich das erreichen? Jede Hilfe wäre zu schätzen.

enter image description here

{

jQuery('select').on('change', function() { 




    jsonObj = []; 
    var id = (this.value); 
    var fullImgUrl = jQuery('#'+id).val(); 

    item = {} 
    item['pcCase'] = id; 
    jsonObj.push(item); 

    if(id !== '0') 
    { 
     jQuery("#img-div").css("opacity","1"); 
     jQuery("#prd-select-img").attr("src",fullImgUrl); 
    } 
    else 
    { 
     jQuery("#img-div").css("opacity","0"); 
    } 
    jsonString = JSON.stringify(jsonObj); 


       jQuery("#continue").click(function(){ 

         jQuery.ajax({ 
           type:'POST', 
           url:'<?php echo $baseUrl; ?>getContent.php', 
           data:{id:id}, 
           success:function(msg){ 
            if(msg){ 
             alert('success'); 
            } 
           } 
          }); 

       }); 
}); 

}

<div class="head-custome-pc"> 
<div class="container"> 
    <h1 class="text-center">Customize Your PC</h1> 
    <div class="steptitle"> 
     <h2 class="text-center"><ins>Step 1 : Choose Your Pc Case</ins></h2> 
    </div> 
    <div class="col-md-6 col-sm-5 col-xs-12"> 
     <div class="steps"> 
     <p> > Step 1:Choose Your PC Case</p> 
     <p> > Step 2:Choose Your Motherboard and Processor</p> 
     <p> > Step 3:Choose Your Graphics Card and Power Supply</p> 
     <p> > Step 4:Choose Your RAM</p> 
     <p> > Step 5:Choose Your HDD/SSD</p> 
     <p> > Step 6:Choose Your Accessories</p> 
     <p> > Step 7:Submit</p> 
     </div> 
    </div> 
    <div id="change-part" class="col-md-3 col-sm-3 col-xs-12"> 
     <form> 
      <div class="form-group"> 
       <label for="sel1">ITX - Small</label> 
        <select class="form-control" id="sel1"> 
        <option value="0">--Choose--</option> 
        <?php 

         $_products = Mage::getModel('catalog/product') 
         ->getCollection() 
         ->addAttributeToSelect('*') 
         ->addAttributeToFilter('customized_product', '1') 
         ->addAttributeToFilter('itx_small', '1') 
         ->load(); 

         foreach($_products as $product) 
         { 
          ?> 
          <option value="<?php echo $product->getId(); ?>"><?php echo $product->getName()."&nbsp;".",&nbsp;S$".$product->getPrice(); ?></option> 

        <?php } 
        foreach($_products as $product) 
         { 
          ?> 
          <input type="hidden" id= "<?php echo $product->getId(); ?>" value="<?php echo $product->getImageUrl(); ?>" /> 

        <?php } ?> 
        </select> 
      </div> 
      <p class="text-center or">OR</p> 
      <div class="form-group"> 
       <label for="sel1">mATX - Medium</label> 
        <select class="form-control" id="sel2"> 
        <option value="0">--Choose--</option> 
        <?php 
         $_products = Mage::getModel('catalog/product') 
         ->getCollection() 
         ->addAttributeToSelect('*') 
         ->addAttributeToFilter('customized_product', '1') 
         ->addAttributeToFilter('m_atx_medium', '1') 
         ->load(); 
         foreach($_products as $product) 
         { 
          ?> 

          <option value="<?php echo $product->getId(); ?>"><?php echo $product->getName()."&nbsp;".",&nbsp;S$".$product->getPrice(); ?></option> 

          <?php } 

          foreach($_products as $product) 
         { 
          ?> 
          <input type="hidden" id= "<?php echo $product->getId(); ?>" value="<?php echo $product->getImageUrl(); ?>" /> 

        <?php } ?> 
        </select> 
      </div> 
      <p class="text-center or">OR</p> 
      <div class="form-group"> 
       <label for="sel1">ATX - Large</label> 
        <select class="form-control" id="sel3"> 
        <option value="0">--Choose--</option> 
        <?php 
         $_products = Mage::getModel('catalog/product') 
            ->getCollection() 
            ->addAttributeToSelect('*') 
            ->addAttributeToFilter('customized_product', '1') 
            ->addAttributeToFilter('atx_large', '1') 
            ->load(); 
          foreach($_products as $product) 
          { 
           ?> 
            <option value="<?php echo $product->getId(); ?>"><?php echo $product->getName()."&nbsp;".",&nbsp;S$".$product->getPrice(); ?></option>  
        <?php } 
        foreach($_products as $product)  
         { 
          ?> 
          <input type="hidden" id="<?php echo $product->getId(); ?>" value="<?php echo $product->getImageUrl(); ?>" /> 

        <?php } ?> 
        </select> 
      </div> 
     </form> 
    </div> 
    <div class="col-md-3 col-sm-4 col-xs-12" id="img-div"> 
     <img id="prd-select-img" src="" class="img-responsive center-block"> 
    </div> 
    <div class="col-md-6 col-md-offset-6 col-xs-12"> 
     <div class="next-butns"> 
       <button class="btn-save">SAVE</button> <button id="continue" class="btn-continue">continue</button> 
     </div> 
    </div> 
</div> 

Answer 1

dieses Konzept in Ihrem Code Versuchen -

function check(ref){ 
 
    $('select').not('#'+ref).prop('selectedIndex',0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<select onchange="check(this.id)" id="A"> 
 
    <option>A</option> 
 
    <option>B</option> 
 
    <option>C</option> 
 
</select> 
 

 
<select onchange="check(this.id)" id="1"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
</select> 
 

 
<select onchange="check(this.id)" id="P"> 
 
    <option>P</option> 
 
    <option>Q</option> 
 
    <option>R</option> 
 
</select>

Was ich hier mache, das ich onchange Ereignis in jedem select bin Aufruf und jedes select außer dem aktuellen Zurücksetzen mit not(). Versuchen Sie es und lassen Sie mich wissen, ob es für Ihr Szenario funktioniert.

Answer 2

<select id ="one"> 
<option value="">Select Value</option> 
<option value ="1">One</option> 
</select> 
<select id="two"> 
<option value="">Select Value</option> 
<option value ="2">Two</option> 
</select> 
<select id="three"> 
<option value="">Select Value</option> 
<option value ="3">Three</option> 
</select> 


<script> 
$('select').change(function(){ 
    var id = $(this).attr("id"); 
    alert(id); 
    $('select').each(function(){ 
    if($(this).attr("id") != id) 
    { 
    $(this, ':selected').val(""); 
    } 
    }) 
});  
</script> 

https://jsfiddle.net/La7fz7om/