Leere erste Dropdown, wenn zweite Dropdown ausgewählt ist und umgekehrt

Question

Ich werde verrückt mit dieser einfachen (ich dachte) zwei Dropdown-Auswahl.

Grundsätzlich brauche ich ein Dropdown leer (Text und Wert), wenn der andere einen Wert ausgewählt hat und natürlich umgekehrt.

Ich habe viele Optionen (auch in SO gegeben) ohne Erfolg ausprobiert.

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

Hier ist eine Geige (die nicht funktioniert):

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

Jede mögliche Hilfe bei diesem geschätzt wird.

Vielen Dank für Ihre Zeit.

Answer 1

Ich denke, das ist, was Sie wollen ... Sie hier 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; 
    }) 
}) 

Answer 2

ich eine Arbeit um für das Problem gefunden zu haben. Vielleicht wird das nur für meine Situation gelten, aber ich werde die Lösung hier posten. Vielleicht hilft jemand anderen:

Zuerst gab ich und ID zur ersten Option, die leer ist, wenn einer der Dropdown geändert wird und dann werde ich diese Option auswählen.

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

Auf diese Weise konnte ich mein Problem lösen. Es könnte sein, dass dies auf eine andere einfache Art und Weise geschehen kann, aber nachdem ich die ganze Nacht nach einer Lösung gesucht habe, die ich nicht finden konnte, musste ich mir etwas einfallen lassen, um mit meiner Arbeit fortzufahren!

Sehen Sie ein funktionierendes Beispiel hier:

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