Question

我对这个简单的（我认为）两个下拉选择感到疯狂。

基本上，当另一个选择了一个值时，我需要一个下拉列表为空（文本和值），当然反之亦然。

我尝试了许多选项（也在SO中给出）没有任何成功。

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

这是一个小提琴（不起作用）：

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

对此有任何帮助将不胜感激。

感谢您的时间。

Answer 1

我认为这就是你想要的......这是你的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

我找到了解决问题的方法。也许这只适用于我的情况，但我会在这里发布解决方案。可能会帮助其他人：

首先我给第一个选项的ID和ID，如果其中一个下拉列表将被更改，我将选择该选项。

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

通过这种方式，我能够解决我的问题。这可能是以另一种简单的方式完成的，但是在寻找一个我找不到的解决方案之后，我不得不拿出一些东西来继续我的工作！

请参阅此处的工作示例：

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

选择第二个下拉菜单时先清空第一个下拉菜单，反之亦然

2 个答案: