使用 jQuery 取得 HTML Select 的 text 和 value

How to do

select 選項如下

<select id="select">
  <option value="1">蘋果</option>
  <option value="2">芭樂</option>
  <option value="3">香蕉</option>
  <option value="4">葡萄</option>
  <option value="5">番茄</option>
</select>

假設所選選項為”1”蘋果

取得 value

$("#select").val(); // 1

取得 text

$("#select option:selected").text(); // 蘋果

範例

範例程式碼如下:

<html>
  <head>
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
    <script>
      function clickselect() {
        let frultVal = $("#select").val();
        let frultText = $("#select option:selected").text();
        alert(`value${frultVal} text${frultText}`);
      }
    </script>
  </head>
  <body>
    <select id="select">
      <option value="1">蘋果</option>
      <option value="2">芭樂</option>
      <option value="3">香蕉</option>
      <option value="4">葡萄</option>
      <option value="5">番茄</option>
    </select>
    <button type="button" onclick="clickselect()">點擊</button>
  </body>
</html>

範例效果: