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>

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

1 个答案: