Question

我在单页上有3个下拉列表，场景是当3个下拉值中的任何一个值发生变化时，剩余需要设置为默认值。我怎样才能实现这一目标？任何帮助都会很感激。

{

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

在您的代码中尝试此概念 -

＆＃13;

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

＆＃13;

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

＆＃13;

我在这里做的是我在每个onchange中调用select个事件，并使用select重置除not()之外的每个*** Variables *** ${TVAURL} http://localhost:1500/ ${Browser} Firefox TC_01: Enter into the application [Documentation] Enter into the application to upload a file Open Browser ${TVAURL} ${Browser} maximize browser window Choose File ........。试试这个，让我知道它是否适用于你的场景。

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/

更改电流时更改其他下拉值

2 个答案: