Получение значений из выпадающего списка jquery в одном классе - PullRequest
Новая
       71

Получение значений из выпадающего списка jquery в одном классе

0 голосов
/ 12 декабря 2018

Можно ли получить значения из двух разных выпадающих списков в одном и том же классе всякий раз, когда в jQuery щелкает любой из них, без необходимости писать две функции изменения.Например: 

    <div class="selectList">
            <select id="prodVersionList" style="float: left; width: 150px; height: 25px;  margin-right: 20px;">
                <option selected="selected">All Products</option>
                <option selected="selected">Pen</option>
                <option selected="selected">Pencil</option>
            </select>
            <select id="prodAudienceList" style="float: right; width: 150px; height: 25px;">
                <option selected="selected">All Versions</option>
                <option selected="selected">1.0</option>
                <option selected="selected">1.1</option>
            </select>
    </div>

Ответы [ 2 ]

0 голосов
/ 12 декабря 2018

Конечно!

Несколько способов сделать это, однако вы можете просто смотреть выборки (вы можете использовать идентификаторы, если хотите), но я просто смотрю все выборки.

$('select').change((e) => {
   var selected =  $("option:selected").map(function(){ return this.value }).get();
    console.log(selected);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selectList">
            <select id="prodVersionList" style="float: left; width: 150px; height: 25px;  margin-right: 20px;">
                <option value="1" selected="selected">All Products</option>
                <option selected="selected">Pen</option>
                <option selected="selected">Pencil</option>
            </select>
            <select id="prodAudienceList" style="float: right; width: 150px; height: 25px;">
                <option selected="selected">All Versions</option>
                <option selected="selected">1.0</option>
                <option selected="selected">1.1</option>
            </select>
    </div>

Выше приведен массив с двумя значениями.В основном я просто нахожу все выбранные параметры и создаю из них простой массив.

РЕДАКТИРОВАТЬ: Извините!Сначала я неправильно прочитал и дал половину правильного ответа.Вот точный.

Редактировать V2: Потому что кто-то указывал на возможную путаницу, это нечто более направленное.

$('.selectList select').change((e) => {
   var selected =  $(".selectList > select > option:selected").map(function(){ return this.value }).get();
    console.log(selected);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selectList">
            <select id="prodVersionList" style="float: left; width: 150px; height: 25px;  margin-right: 20px;">
                <option value="1" selected="selected">All Products</option>
                <option selected="selected">Pen</option>
                <option selected="selected">Pencil</option>
            </select>
            <select id="prodAudienceList" style="float: right; width: 150px; height: 25px;">
                <option selected="selected">All Versions</option>
                <option selected="selected">1.0</option>
                <option selected="selected">1.1</option>
            </select>
    </div>
    
    <div class="altSelect">
    <select id="prodVersionList" style="float: left; width: 150px; height: 25px;  margin-right: 20px;">
                <option value="1" selected="selected">All Products</option>
                <option selected="selected">Pen</option>
                <option selected="selected">Pencil</option>
            </select>
            <select id="prodAudienceList" style="float: right; width: 150px; height: 25px;">
                <option selected="selected">All Versions</option>
                <option selected="selected">1.0</option>
                <option selected="selected">1.1</option>
            </select>
    </div>
</div>

Или еще один: 

$('#prodVersionList,#prodAudienceList').change((e) => {
   var selected =  $(".selectList > select > option:selected").map(function(){ return this.value }).get();
    console.log(selected);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selectList">
            <select id="prodVersionList" style="float: left; width: 150px; height: 25px;  margin-right: 20px;">
                <option value="1" selected="selected">All Products</option>
                <option selected="selected">Pen</option>
                <option selected="selected">Pencil</option>
            </select>
            <select id="prodAudienceList" style="float: right; width: 150px; height: 25px;">
                <option selected="selected">All Versions</option>
                <option selected="selected">1.0</option>
                <option selected="selected">1.1</option>
            </select>
    </div>
    
    
    <div class="altSelect">
    <select style="float: left; width: 150px; height: 25px;  margin-right: 20px;">
                <option value="1" selected="selected">All Products</option>
                <option selected="selected">Pen</option>
                <option selected="selected">Pencil</option>
            </select>
            <select style="float: right; width: 150px; height: 25px;">
                <option selected="selected">All Versions</option>
                <option selected="selected">1.0</option>
                <option selected="selected">1.1</option>
            </select>
    </div>
    </div>

Это разработка, существует миллион способов выполнить задачу.Я не собирался кормить каждую возможность ложкой, а просто дать способ сделать это.

0 голосов
/ 12 декабря 2018

Найдите элементы выбора внутри div с классом «selectList» и определите каждую выбранную опцию в найденных списках.Компилировать в массив (или любой другой) для последующего использования. 

var values = new Array();
$('.selectList select').on('change', function(){
    values = new Array();
    $('.selectList select').find(":selected").each(function(){
        values.push($(this).text());
    });
    console.log(values);
});

[EDIT] обновлен, так что массив сбрасывается и заполняется при новом выборе

...