我們有一個2下拉列表，在選擇第一個下拉列表的多個值時具有相同的值，第二個下拉值是自動選擇的

Question

我們有一個2下拉列表具有相同的值，選擇第一個下拉列表的多個值第二個下拉值是自動選擇的，其值與第一個下拉列表相同

Answer 1

將change事件偵聽器添加到第一個下拉列表，並使用第一個下拉列表的選定值更改第二個下拉列表的值。

 // javascript const selectEles = document.querySelectorAll('select'); selectEles[0].addEventListener('change', function() { selectEles[1].value = this.value; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> 

------ jQuery -------

 const selectEles = $('select'); $(selectEles[0]).on('change', function() { selectEles[1].value = $(this).val(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> 

對於多個值。 要在dropdown選擇多個值，請添加multiple屬性以進行select 。 當您在下拉菜單上設置多個時，它將返回一個選定選項的數組。 檢查第二個下拉值在選定值中存在，如果yes設置option中選擇屬性為true 。

 const selectEle = document.querySelector('select#first'); const secondSelectOptions = document.querySelectorAll('select#second>option') selectEle.addEventListener('change', function() { const selectedOptionVals = [...this.selectedOptions].map(option => option.value); secondSelectOptions.forEach(option => { if(selectedOptionVals.includes(option.value)) { console.log('Entering if'); option.selected = true; } else { option.selected = false; } }) }); 

 <select id="first" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> <select id="second" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>