Javascript获取所有下拉列表的值

时间:2016-04-23 13:39:02

标签: javascript jquery html drop-down-menu html-select

我有一个表,每行内有多个下拉列表

<table style="width:100%">
  <tr class= 'products'>
    <td>Gold</td>
    <td>
    <select onchange='get_all_products()'>
  <option value="25">Gold 1</option>
  <option value="27">Gold 2</option>
</select>
    </td>
  </tr>
  <tr class= 'products'>
    <td>Silver</td>
    <td>
    <select onchange='get_all_products()'>
  <option value="50">SILVER 1</option>
  <option value="476">SILVER 2</option>
</select>
</td>
  </tr>
  <tr class= 'products'>
    <td>Bronz</td>
    <td>
    <select onchange='get_all_products()'>
  <option value="71">BRONZ 1</option>
  <option value="89">BRONZ 2</option>
</select>
</td>
  </tr>
</table>

在每个下拉列表的onchange上,我想获得班级内所有下拉菜单的价值&#34;产品&#34; <tr class="products">

1 个答案:

答案 0 :(得分:1)

您可以使用jquery进行所有选择:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script>

  function get_all_products() {
    $('.products select').each(function (index, el) {
        console.log($(el).find('option:selected').text() + ' - ' + $(el).val());
    });
  };

</script>

输出:

Gold 2 - 27
SILVER 1 - 50
BRONZ 1 - 71