--- tags: Jquery, Javascript, Frontend --- # 使用jQuery取得HTML Select的text和value ## How to do select選項如下 ```htmlembedded= <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 ```javascript= $( "#select" ).val(); // 1 ``` 取得text ```javascript= $( "#select option:selected" ).text(); // 蘋果 ``` ## 範例 範例程式碼如下: ```htmlembedded= <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> ``` 範例效果: ![](https://i.imgur.com/wUYiXiX.gif)