淺談原生javascript的select操作
阿新 • • 發佈：2019-02-01
DEMO1
<script>
window.onload=function(){
var oSel=document.getElementById('sel');
//alert(oSel.value); //當前選中的option的value
var aOption=oSel.getElementsByTagName('option');
for(var i=0;i<aOption.length;i++){
if(aOption[i].selected==true){
alert(aOption[i].innerHTML);
}
}
};
DEMO2
<script>
window.onload=function(){
var oSel=document.getElementById('sel');
//alert(oSel.value); //當前選中的option的value
var aOption=oSel.options
//oSel.options // 所有select下面的option DEMO3
<script>
window.onload=function(){
var oSel=document.getElementById('sel');
oSel.onchange=function(){
//alert('ok');
//alert(oSel.value); 選擇改變時，取value
//選擇改變時取text
alert(oSel.options[oSel.selectedIndex].text);
};
};
</script>
<select id="sel">
<option value="sh">上海</option>
<option value="bj" >北京</option>
<option value="wh" selected>武漢</option>
</select>DEMO4
<script>
window.onload=function(){
var oSel=document.getElementById('sel');
var oT1=document.getElementById('t1');
var oT2=document.getElementById('t2');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function(){
var oPt=new Option(oT2.value,oT1.value);//建立一個option
oSel.options.add(oPt); //新增
};
};
</script>
<body>
<input type="text" id="t1" value="value">
<input type="text" id="t2" value="text">
<input type="button" value="新增" id="btn1">
<select id="sel"></select>
</body>DEMO5
<script>
window.onload=function(){
var oSel=document.getElementById('sel');
var oT1=document.getElementById('t1');
var oT2=document.getElementById('t2');
var oBtn=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
//新增
oBtn.onclick=function(){
var oPt=new Option(oT2.value,oT1.value);
oSel.options.add(oPt);
};
//刪除
oBtn2.onclick=function(){
//select物件.options.remove(下標);
oSel.options.remove(oSel.selectedIndex);
};
};
</script>
<body>
<input type="text" id="t1" value="value">
<input type="text" id="t2" value="text">
<input type="button" value="新增" id="btn1">
<select id="sel"></select>
<input type="button" value="刪除" id="btn2">
</body>DEMO6
<script>
window.onload=function(){
var oSel=document.getElementById('sel');
var oT1=document.getElementById('t1');
var oT2=document.getElementById('t2');
var oBtn=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
viewSel();
//新增
oBtn.onclick=function(){
var oPt=new Option(oT2.value,oT1.value);
oSel.options.add(oPt);
viewSel();
};
//刪除
oBtn2.onclick=function(){
//select物件.options.remove(下標);
oSel.options.remove(oSel.selectedIndex);
viewSel();
};
function viewSel(){
if(oSel.options.length==0){
oSel.style.display='none';
}else{
oSel.style.display='inline-block';
}
}
};
</script>
<body>
<input type="text" id="t1" value="value">
<input type="text" id="t2" value="text">
<input type="button" value="新增" id="btn1">
<select id="sel"></select>
<input type="button" value="刪除" id="btn2">
</body>DEMO7
<script>
window.onload=function(){
var oSel=document.getElementById('sel');
var oT1=document.getElementById('t1');
var oT2=document.getElementById('t2');
var oBtn=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
viewSel();
//新增
oBtn.onclick=function(){
find=false;
for(var j=0;j<oSel.options.length;j++){
if(oSel.options[j].value==oT1.value){
find=true;
break;
}
}
if(!find){//禁止新增重複
var oPt=new Option(oT2.value,oT1.value);
oSel.options.add(oPt);
viewSel();
}
};
//刪除
oBtn2.onclick=function(){
//select物件.options.remove(下標);
oSel.options.remove(oSel.selectedIndex);
viewSel();
};
function viewSel(){
if(oSel.options.length==0){
oSel.style.display='none';
}else{
oSel.style.display='inline-block';
}
}
};
</script>
<body>
<input type="text" id="t1" value="value">
<input type="text" id="t2" value="text">
<input type="button" value="新增" id="btn1">
<select id="sel"></select>
<input type="button" value="刪除" id="btn2">
</body>