У нас есть 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>