Javascript 获取所有下拉菜单的值

Question

我有一个 table，每行里面有多个下拉菜单

<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 上，我想获取 class "products" <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

Javascript 获取所有下拉菜单的值

Javascript get the value of all dropdowns

javascript

jquery

html

drop-down-menu

html-select