Как получить значение «related» selectedIndex в jQuery

Question

У меня есть 2 <select> списков в моей разметке HTML. Один из них доступен в веб-форме, а второй скрыт. Они оба связаны друг с другом.

Я хочу получить значение, а не идентификатор selectedIndex, #list2.

первый список отображается в веб-форме:

<select id="list1" name="name" class="form-control"> 
    <option value=""></option> 
    <option value="004">Alpha</option> 
    <option value="001">Beta</option> 
    <option value="006">Delta</option> 
    <option value="020">Omega</option> 
</select> 

2 списка, скрытые в веб-форме:

<select id="list2" name="amount" class="form-control" style="display:none"> 
    <option value=""></option> 
    <option value="004">1.00</option> 
    <option value="001">2.00</option> 
    <option value="006">3.00</option> 
    <option value="020">4.00</option> 
</select> 

Пример: При выборе выпадающий список элемент для «Дельта» I хотите использовать значение «3.00» в моей функции jQuery.

Answer 1

http://jsfiddle.net/9uprxkmk/1/

$('#list1').on('change', function(){ 
    alert($('#list2 option[value="'+$(this).find(":selected").val()+'"]').html()); 
}); 

Answer 2

$(function(){ 
 
    //cache the list 
 
    var $list1 = $('#list1'); 
 
    //cache the other list options 
 
    var $list2Options = $('#list2 option'); 
 
    
 
    $list1.on('change', function(){ 
 
     //filter on the value and get the second value 
 
     console.log($list2Options.filter('[value="'+ this.value +'"]').text()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select id="list1" name="name" class="form-control"> 
 
    <option value=""></option> 
 
    <option value="004">Alpha</option> 
 
    <option value="001">Beta</option> 
 
    <option value="006">Delta</option> 
 
    <option value="020">Omega</option> 
 
</select> 
 

 
<select id="list2" name="amount" class="form-control" style="display:none"> 
 
    <option value=""></option> 
 
    <option value="004">1.00</option> 
 
    <option value="001">2.00</option> 
 
    <option value="006">3.00</option> 
 
    <option value="020">4.00</option> 
 
</select>

Answer 3

Вы можете использовать следующий селектор:

$("#list1 option:selected").html(); 

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