|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
jQuery獲取下拉菜單列表option:selected選定值的兩種方法
作者:admin 時(shí)間:2019-5-5 17:47:7 瀏覽:在表單提交的網(wǎng)頁(yè)中，我們經(jīng)常使用下拉菜單列表，這篇文章解釋了如何獲取下拉列表選擇的值。 在jQuery中，我們通過(guò)使用.val()方法獲得下拉列表的選定值。 .val()方法主要用于獲取表單元素的值，例如input，select和textarea。
描述：獲取匹配元素集中第一個(gè)元素的當(dāng)前值。
jQuery獲取下拉菜單列表選定值
下面是實(shí)例分析。
引用jQuery庫(kù)文件
在HTML代碼前面需要引用jQuery庫(kù)文件，你可以把jQuery庫(kù)文件下載到本地服務(wù)器進(jìn)行調(diào)用，也可以直接使用第三方提供的公共庫(kù)文件，這里推薦使用百度的jQuery庫(kù)文件。
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
HTML
這里我們有一個(gè)select下拉列表控件和一個(gè)button按鈕標(biāo)簽，所以我們的HTML如下所示：
<select id="myDlist">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
<button id="btn">Click me</button>
jQuery
這里使用.val()方法，我們得到下拉列表選定值。
代碼1：
$('#myDlist option:selected').val();
代碼2：
$('#myDlist').val();
上面兩種代碼都可以獲得下拉菜單列表的選定值，不過(guò)第2種方法更加簡(jiǎn)潔。
完整的HTML代碼
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
</br>
<select id="myDlist">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
<button id="btn">Click me</button>
<script type="text/javascript">
$("#btn").on('click',function(){
//console.log($('#myDlist option:selected').val());
console.log($('#myDlist').val());
});
</script>
</body>
</html>
標(biāo)簽: 下拉菜單 select dropdown-list
- 站長(zhǎng)推薦
