電流變化時更改其他下拉值

Question

我在單個頁面上有3個下拉菜單， 情景是當3個下拉值中的任何一個變化時，剩餘的值需要設置爲默認值。 我如何實現這一目標？任何幫助將不勝感激。

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

嘗試在你的代碼，這個概念 -

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>

我在做什麼這裏是我打電話每selectonchange事件和重置每select除了使用not()當前之一。試試這個，讓我知道它是否適合你的場景。

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/