CODEWITHSUNDEEP
jqueryhtmlselectdrop-down-menudefault
roi m
roi m

Reputation: 33

Jquery- Set select option back to his default option

I have several drop down lists (select option) in my site. What I'm trying to achieve is that when user selects an option from one dropdown list, and then selects an option from second drop down list, the first one will get back to default.

Any suggestions?

This is what i have tried with jQuery:

I marked I caps where I couldn't find the right command.. I tried several methods but no good.. Commands that haven't worked list :

$("#target").val($("#target option:first").val());
this.find('option:eq(0)').prop('selected', true);

What I tried - Working but the change value command doesn't work.. It loop through all selects jQuery:

$('select').change(function(){
   x =  $(this).attr('id');

   $('select').each(function () {
    _id = $(this).attr('id');
          if(_id != x)
          {
            **CHANGE BEACK TO DEFAULT COMMAND** -COULDT FIND IY
            }

});



});

HTML :

<select id="1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select><select id="2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select><select id="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select><select id="4">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Upvotes: 2

Views: 2763

Answers (2)

MLM
MLM

Reputation: 3688

Demo

Matt's solution works for the situation you presented, but here is a more robust way that will take into account if you have a default option set via the selected attribute on an option.

ex. <option selected="selected">Opel</option>

// Reset the other select elements
// When we choose something
$('select').on('change', function() {
    $(this).siblings().prop('selectedIndex', function(index) {
        // Search for a default option
        var $selectedOption = $(this).find('option[selected]');        
        if($selectedOption.length)
            return $selectedOption.index();

        // If there is no default, just reset to the first option
        return 0;
    });

    // Do what you want with the value
    // var value = $(this).val();
    // console.log(value);
});


// Reset the other select elements
// When we choose something
$('select').on('change', function() {
    $(this).siblings().prop('selectedIndex', function(index) {
        // Search for a default option
        var $selectedOption = $(this).find('option[selected]');        
        if($selectedOption.length)
            return $selectedOption.index();
        
        // If there is no default, just reset to the first option
        return 0;
    });
    
    // Do what you want with the value
    var value = $(this).val();
    console.log(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<select id="1">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>
<select id="2">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>
<select id="3">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>

<br /><br />

Has default value of "Opel":
<br />
<select id="4">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel" selected="selected">Opel</option>
    <option value="audi">Audi</option>
</select>

Upvotes: 1

Matt
Matt

Reputation: 457

Is this what you mean? 

$('select').change(function(){
   $('select').not(this).prop('selectedIndex',0);            
});

http://jsfiddle.net/tj4k8eeq/1/

Upvotes: 5

Related Questions