Javascript获取所有下拉菜单的值

Question

我有一个表格，每行内都有多个下拉菜单

<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每个下拉列表的我想获取“产品”类中所有下拉列表的值 <tr class="products">

Answer 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