javascript - 我们有一个 2 个下拉列表，在选择第一个下拉列表的多个值时具有相同的值，第二个下拉列表值是自动选择的

Question

我们有一个 2 个下拉列表，在选择第一个下拉列表的多个值时具有相同的值，第二个下拉列表值是自动选择的，其值与第一个下拉列表相同

标签： javascriptjqueryhtmljspbootstrap-4

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>