如何在 jQuery 中获取 "related" selectedIndex 的值

Question

我的 HTML 标记中有 2 个 <select> 列表。其中之一可以在 Web 表单中访问，第二个是隐藏的。他们都相互关联。

我想获取 #list2 的值，而不是 selectedIndex ID。

Web 表单中可见的第一个列表：

<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>

Web 表单中隐藏的第二个列表：

<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>

示例： 选择 "Delta" 的下拉列表项时，我想在我的 jQuery 函数中使用值“3.00”。

Answer 1

$(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 2

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

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

Answer 3

您可以使用以下选择器：

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

那应该抓住所选元素的开始和结束选项标签之间的任何内容。

如何在 jQuery 中获取 "related" selectedIndex 的值

How to get the value of a "related" selectedIndex in jQuery

jquery

html-select