javascript中select下拉框的用法總結(jié)
本文針對(duì)開發(fā)項(xiàng)目中遇到的問題，進(jìn)行了匯總
問題1：如何選擇select的option里面的值？
首先會(huì)用到一個(gè)方法 onchange（）；這個(gè)方法主要用于觸發(fā)，選擇框內(nèi)容改變時(shí)間
實(shí)現(xiàn)代碼：
<!doctype html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<select onchange="test(event)">
<option>安靜</option>
<option>晴天</option>
<option>七里香</option>
</select>
<script type="text/javascript">
function test (e) {
var e = event ? event : window.event;
alert(e.target.value);
}
</script>
</body>
</html>
問題2：可是在開發(fā)中，我們一般選擇了內(nèi)容只是為了顯示，而真正要做的是和后臺(tái)進(jìn)行交互數(shù)據(jù)傳輸，這時(shí)候，我們?yōu)榱吮M可能減少http數(shù)據(jù)傳輸，所以一般會(huì)傳 id 等作為數(shù)據(jù)傳輸標(biāo)志，如何做？
開發(fā)中，option一般都是動(dòng)態(tài)創(chuàng)建的，那么這時(shí)候，我們只需要給你動(dòng)態(tài)創(chuàng)建一個(gè)自定義屬性。那么如何獲取自定義屬性呢？
<!doctype html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<select onchange="test(event)" id="sel"></select>
<script type="text/javascript">
//定義內(nèi)容的json數(shù)據(jù)，一般從后臺(tái)獲取
var data = [
{
name: '晴天',
id: '1'
},
{
name: '安靜',
id: '2'
},
{
name: '七里香',
id: '3'
}
];
createOption('sel',data);
//創(chuàng)建option
function createOption(parentId, data){
var parentId = document.getElementById(parentId);
for(var i=0; i<data.length; i++){
var opt = document.createElement('option');
//設(shè)置option的值
opt.innerHTML = data[i].name;
//定義option的自定義值
opt.setAttribute('dataid', data[i].id);
parentId.appendChild(opt);
}
}
//選取自定義屬性的方法
function test (e) {
var e = event ? event : window.event;
var target = e.target;
var index = target.selectedIndex;
alert("我的id="+target[index].getAttribute('dataid'));
}
</script>
</body>
</html>
結(jié)果圖如下：
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊jquery下拉框效果匯總、JavaScript下拉框效果匯總進(jìn)行學(xué)習(xí)。
這就是我在開發(fā)中遇到的問題，希望可以對(duì)大家的學(xué)習(xí)有所啟發(fā)。
- js實(shí)現(xiàn)Select下拉框具有輸入功能的方法
- JS操作select下拉框動(dòng)態(tài)變動(dòng)(創(chuàng)建/刪除/獲取)
- JavaScript實(shí)現(xiàn)將數(shù)組數(shù)據(jù)添加到Select下拉框的方法
- Javascript select下拉框操作常用方法
- JS Select下拉框(支持輸入模糊查詢)
- JavaScript實(shí)現(xiàn)向select下拉框中添加和刪除元素的方法
- JavaScript實(shí)現(xiàn)兩個(gè)select下拉框選項(xiàng)左移右移
- js實(shí)現(xiàn)可輸入可選擇的select下拉框
- jquery及原生js獲取select下拉框選中的值示例
- JavaScript實(shí)現(xiàn)獲取select下拉框中第一個(gè)值的方法
相關(guān)文章
Bootstrap輸入框組件簡單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Bootstrap輸入框組件的簡單實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
JS動(dòng)態(tài)計(jì)算移動(dòng)端rem的解決方案
移動(dòng)設(shè)備分辨率五花八門雖然我們可以通過CSS3的media query來實(shí)現(xiàn)適配，但是這種做法并不能適配所有設(shè)備，這篇文章主要介紹了js動(dòng)態(tài)計(jì)算移動(dòng)端rem的解決方案，非常不錯(cuò)，感興趣的朋友一起看看吧2016-10-10
這篇文章主要介紹了js判斷當(dāng)前瀏覽器類型,判斷IE瀏覽器方法,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了JavaScript 空間坐標(biāo)的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
js指定步長實(shí)現(xiàn)單方向勻速運(yùn)動(dòng)
這篇文章主要為大家詳細(xì)介紹了js指定步長實(shí)現(xiàn)單方向勻速運(yùn)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
javascript讀取Xml文件做一個(gè)二級(jí)聯(lián)動(dòng)菜單示例
這篇文章主要介紹了使用javascript中讀取Xml文件做成的一個(gè)二級(jí)聯(lián)動(dòng)菜單,需要的朋友可以參考下2014-03-03
高山登不上,不是因?yàn)轶w力不支,只因鞋里一粒。學(xué)習(xí)也是如此，因而有必要把JavaScript中常見的和與其它語言不同的那些細(xì)節(jié)學(xué)習(xí)一下2012-06-06
JavaScript自定義等待wait函數(shù)實(shí)例分析
這篇文章主要介紹了JavaScript自定義等待wait函數(shù),實(shí)例分析了自定義等待函數(shù)的實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2015-03-03
js 提交form表單和設(shè)置form表單請(qǐng)求路徑的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨s 提交form表單和設(shè)置form表單請(qǐng)求路徑的實(shí)現(xiàn)方法。2016-10-10
在使用bootstrap table的復(fù)選框功能的時(shí)候，由于采用服務(wù)端分頁，當(dāng)在第一頁選擇了某些數(shù)據(jù)，然后點(diǎn)擊第二頁選擇一些數(shù)據(jù)，再次點(diǎn)回第一頁，發(fā)現(xiàn)原先選擇的數(shù)據(jù)已經(jīng)清空了，原來的多選框并不支持翻頁保留多選數(shù)據(jù)，怎么解決呢，下面小編給大家分享下解決思路2017-03-03