Определение индекса выбранного option

Question

Ребята вот одинаковый код для двух селектов на моей сайте. Я определяю индекс выбранного OPTION. Проблема в том, что при изменении первого селекта значение индекса всегда определяется верно. А при изменении второго - всегда в "-1". Почему ?

var index1 = $('[value='+have+']');
var index1_cookie = $('#select-currencies__have option').index(index1);
console.log(index1_cookie);
Cookies.set('shuf1', index1_cookie);

var index2 = $('[value='+want+']');
var index2_cookie = $('#select-currencies__want option').index(index2);
console.log(index2_cookie);
Cookies.set('shuf2', index2_cookie);

Answer 1

Вот так выглядит один из селектов:

<select id="select-currencies__have" name="have" tabindex="-1">
    <option></option>
    <option value="bch">Bitcoin Cash</option>
    <option value="btc">Bitcoin</option>
    <option value="eth">Ethereum</option>
    <option value="eur">Евро</option>
    <option value="gbp">Фунт стерлингов</option>
    <option value="ltc">Litecoin</option>
    <option value="pzm">Prizm</option>
    <option value="rub">Рубль</option>
    <option value="usd">Доллар</option>
    <option value="wvs">Waves</option>
    <option value="xrp">Ripple</option>
</select>

Вот так второй:

<select id="select-currencies__want" name="want" tabindex="-1">
    <option></option>
    <option value="bch">Bitcoin Cash</option>
    <option value="btc">Bitcoin</option>
    <option value="eth">Ethereum</option>
    <option value="eur">Евро</option>
    <option value="gbp">Фунт стерлингов</option>
    <option value="ltc">Litecoin</option>
    <option value="pzm">Prizm</option>
    <option value="rub">Рубль</option>
    <option value="usd">Доллар</option>
    <option value="wvs">Waves</option>
    <option value="xrp">Ripple</option>
</select>

Answer 2

В index2 у вас попадает option из первого select'а. Естественно, он отсутствует во втором select'е.

Answer 3

    var elem1 = document.getElementById('select-currencies__have');
    var elem2 = document.getElementById('select-currencies__want');
    elem1.onchange = function () {
        var index1 = elem1.selectedIndex; // Получаем индекс селекта
        var text1 = elem1.value; // Получаем значение селекта Это если его тоже захотите использовать
        //document.cookie = 'shuf1= ' + index1; // Сохраняем в куки
        console.log(index1); // Выводим индекс
        //console.log(document.cookie); // Выводим все куки.

    };
    elem2.onchange = function () {
        var index2 = elem2.selectedIndex; // Получаем индекс селекта
        var text2 = elem2.value; // Получаем значение селекта Это если его тоже захотите использовать
        //document.cookie = 'shuf2= ' + index2; // Сохраняем в куки
        console.log(index2); // Выводим индекс
        //console.log(document.cookie); // Выводим все куки.
    };

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select-currencies__have" name="have" tabindex="-1">
    <option></option>
    <option value="bch">Bitcoin Cash</option>
    <option value="btc">Bitcoin</option>
    <option value="eth">Ethereum</option>
    <option value="eur">Евро</option>
    <option value="gbp">Фунт стерлингов</option>
    <option value="ltc">Litecoin</option>
    <option value="pzm">Prizm</option>
    <option value="rub">Рубль</option>
    <option value="usd">Доллар</option>
    <option value="wvs">Waves</option>
    <option value="xrp">Ripple</option>
</select>
<select id="select-currencies__want" name="want" tabindex="-1">
    <option></option>
    <option value="bch">Bitcoin Cash</option>
    <option value="btc">Bitcoin</option>
    <option value="eth">Ethereum</option>
    <option value="eur">Евро</option>
    <option value="gbp">Фунт стерлингов</option>
    <option value="ltc">Litecoin</option>
    <option value="pzm">Prizm</option>
    <option value="rub">Рубль</option>
    <option value="usd">Доллар</option>
    <option value="wvs">Waves</option>
    <option value="xrp">Ripple</option>
</select>

Answer 4

Для начала не стоит искать value сразу по всему DOM, ибо у вас в обоих селектах находятся одни и те же значения. Ищите только там где нужно.

Ищем индекс опций по значению

var index1_cookie = $(`#select-currencies__have option[value=${have}]`).index();
var index2_cookie = $('#select-currencies__want option[value=${want}]').index();

Ищем индекс выбранных опции

var index1_cookie = $(`#select-currencies__have option:selected`).index();
var index2_cookie = $('#select-currencies__want option:selected').index();

БЛОГ НА HUSL

Определение индекса выбранного option

Ответы (4 шт):