CODEWITHSUNDEEP
jquery
Franco
Franco

Reputation: 2329

Empty first drop down when second dropdown is selected and viceversa

I become crazy with this simple (I thought) two drop down selection.

Basically I need one drop down be empty (text and value) when the other has a value selected and of course viceversa.

I have tried many options (also given in SO ) without any success.

<select id="counterupBackgrounds1" class="form-control counterupBackgrounds1">
    <option value="business-girl.png">business-girl.png</option>
    <optgroup>
        <option value="bubbles.jpg">bubbles.jpg</option>
        <option value="bug-eggs.png">bug-eggs.png</option>
        <option value="bureau.jpg">bureau.jpg</option>
        <option value="business-girl.png">business-girl.png</option>
        <option value="city-road.jpg">city-road.jpg</option>
        <option value="deep-sea.png">deep-sea.png</option>
        <option value="light-spots.png">light-spots.png</option>
        <option value="paper-birds.png">paper-birds.png</option>
        <option value="paper-stripes.png">paper-stripes.png</option>
        <option value="sea-shore.jpg">sea-shore.jpg</option>
        <option value="soft-mountains.png">soft-mountains.png</option>
       <option value="stars-spiral.jpg">stars-spiral.jpg</option>
    </optgroup>
</select>

<select id="counterupBackgrounds2" class="form-control counterupBackgrounds2">
    <option value=""></option>
    <optgroup id="foundedImages_parallax">
        <option class="user-images_parallax" value="see-shore.jpg">see-shore.jpg</option>
        <option class="user-images_parallax" value="stars-spiral.jpg">stars-spiral.jpg</option>
    </optgroup>
</select>

Here is a fiddle (which is not working):

https://jsfiddle.net/gdzjbj4p/2/

Any help with this will be appreciated.

Thank you for your time.

Upvotes: 0

Views: 238

Answers (2)

Franco
Franco

Reputation: 2329

I have found a work around for the problem. Maybe this will be only true for my situation but I will post the solution here. Possibly will help someone else:

First I gave and ID to the first option which will be empty if one of the drop down will be changed and than I will select that option.

<select id="counterupBackgrounds1" class="form-control counterupBackgrounds1">
    //an id is added to the first option
    <option id="selectedValue1" value="business-girl.png">business-girl.png</option>
    <optgroup>
        <option value="bubbles.jpg">bubbles.jpg</option>
        <option value="bug-eggs.png">bug-eggs.png</option>
        <option value="bureau.jpg">bureau.jpg</option>
        <option value="business-girl.png">business-girl.png</option>
        <option value="city-road.jpg">city-road.jpg</option>
        <option value="deep-sea.png">deep-sea.png</option>
        <option value="light-spots.png">light-spots.png</option>
        <option value="paper-birds.png">paper-birds.png</option>
        <option value="paper-stripes.png">paper-stripes.png</option>
        <option value="sea-shore.jpg">sea-shore.jpg</option>
        <option value="soft-mountains.png">soft-mountains.png</option>
        <option value="stars-spiral.jpg">stars-spiral.jpg</option>
    </optgroup>
</select>

<select id="counterupBackgrounds2" class="form-control counterupBackgrounds2">
    //an id is added to the first option
    <option id="selectedValue2" value=""></option>
    <optgroup id="foundedImages_parallax">
        <option class="user-images_parallax" value="see-shore.jpg">see-shore.jpg</option>
        <option class="user-images_parallax" value="stars-spiral.jpg">stars-spiral.jpg</option>
    </optgroup>
</select>

In this way I was able to solve my problem. It could be that this can be done in an other simple way, but after looking the all night for a solution which I couldn't find I had to come up with something in order to go on with my work!

See a working example in here:

https://jsfiddle.net/gdzjbj4p/4/

Upvotes: 0

Matthew
Matthew

Reputation: 3234

I think this is what you want... Here's yours JSFiddle

$(document).ready(function(){
     $('#counterupBackgrounds2').on('change',function(){
    console.log('2 is changed')
     $('#counterupBackgrounds1 option')[0].selected = true;
   })

    $('#counterupBackgrounds1').on('change',function(){
        console.log('1 is changed')
     $('#counterupBackgrounds2 option')[0].selected = true;
   })
})

Upvotes: 1

Related Questions