<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Select控制元件測試</title>
</head>
<body>
<select id="mySel">
</select>
<input type="text" id="id" placeholder="請輸入要移除的ID號碼">
<hr/>
<button id="btn1" type="button" >初始化資料</button>
<button id="btn2" type="button" >測試移除操作</button>
<button id="btn3" type="button" >測試移除選中的專案</button>
<button id="btn4" type="button" >修改選中專案的顯示名稱</button>
<button id="btn5" type="button" >設定1002選擇狀態</button>
<button id="btn6" type="button" >獲取當前專案的文字,屬性,索引</button>
<button id="btn7" type="button" >清空列表</button>
<script type="text/javascript">
window.onload=function () {
var objSelect = document.getElementById("mySel");
document.getElementById("btn1").onclick=function () {
//獲取option的長度
var length = objSelect.options.length;
if(length==0){
alert("沒有內容,新增預設內容");
//使用innerHTML操作,方式一
objSelect.innerHTML="<option value=''>請選擇你的部門</option>";
//設定按鈕為可用
this.disabled=false;
}else{
//設定按鈕為不可用
this.disabled=true;
//使用本地物件新增資料,方式二
var valItem = new Option("測試部","1001");
//新增操作
objSelect.options.add(valItem);
var valItem = new Option("軟體部","1002");
//新增操作
objSelect.options.add(valItem);
var valItem = new Option("研發部","1003");
//新增操作
objSelect.options.add(valItem);
}
}
document.getElementById("btn2").onclick=function () {
//獲取輸入的ID號碼
var id = document.getElementById("id").value;
var length = objSelect.options.length;
//判斷
if(length>0){
//迭代
for(var i = 0 ;i<length;i++){
if(objSelect.options[i].value==id){
//移除操作,方式一
objSelect.options.remove(i);
break;//跳出迴圈
}
}
}else{
alert("沒有專案,空白的!");
document.getElementById("btn1").disabled=false;
}
}
document.getElementById("btn3").onclick=function () {
var length = objSelect.options.length;
for(var i = 0 ;i<length;i++){
if(objSelect.options[i].selected){
//移除操作,方式二
objSelect.options[i]=null;
break;//跳出迴圈
}
}
}
document.getElementById("btn4").onclick=function () {
//設定兩個簡單變數,不弄複雜化的操作了
var oValue = 1001;
//修改內容
var modText = "修改為胖先森";
var modValue = 101;
var length = objSelect.options.length;
for(var i = 0 ;i<length;i++){
if(objSelect.options[i].value==oValue){
objSelect.options[i].text=modText;
objSelect.options[i].value=modValue;
break;//跳出迴圈
}
}
}
document.getElementById("btn5").onclick=function () {
//方式一:推薦方式
objSelect.value=1002;
//方式二
/*var length = objSelect.options.length;
for(var i = 0 ;i<length;i++){
if(objSelect.options[i].value==1002){
objSelect.options[i].selected=true;
break;//跳出迴圈
}
}*/
}
document.getElementById("btn6").onclick=function () {
alert("當前的索引:"+objSelect.selectedIndex);
alert("當前的文字:"+objSelect.options[objSelect.selectedIndex].text);
alert("當前值,方式一:"+objSelect.options[objSelect.selectedIndex].value);
alert("當前值,推薦方式二:"+objSelect.value);
}
document.getElementById("btn7").onclick=function () {
//不使用DOM操作,清空
objSelect.options.length=0;
document.getElementById("btn1").disabled=false;
}
}
</script>
</body>
</html>
複製程式碼
JavaScript操作select控制元件
相關文章
- javascript操作selectJavaScript
- javascript操作Select中的options集合JavaScript
- JavaScript動態操作select下拉選單JavaScript
- javascript操作Select標記中options集合JavaScript
- 原生javascript操作select下拉選單程式碼例項JavaScript
- jquery 操作selectjQuery
- JavaScript select 事件JavaScript事件
- JavaScript select remove()JavaScriptREM
- JavaScript select typeJavaScript
- JavaScript select valueJavaScript
- JavaScript select multipleJavaScript
- Js操作Select大全JS
- JavaScript select add()JavaScript
- JavaScript select options 集合JavaScript
- JavaScript select新增optionJavaScript
- js 操作select和optionJS
- JavaScript select text 屬性JavaScript
- JavaScript select size 屬性JavaScript
- JavaScript select length 屬性JavaScript
- JQuery 對 Select option 的操作jQuery
- SQLServer DML操作阻塞SELECT查詢SQLServer
- jQuery操作select下拉常用程式碼jQuery
- jquery如何操作select下拉選單jQuery
- JS操作Radio與SelectJS
- 使用select監視update的操作
- Oracle DML(非select) 操作不commit 對select的影響OracleMIT
- jquery操作select(取值,設定選中)jQuery
- SQL學習筆記—非select操作SQL筆記
- jQuery操作select下拉選單程式碼jQuery
- Oracle 樹操作(select…start with…connect by…prior)Oracle
- JavaScript新增和刪除select下拉項JavaScript
- JavaScript 動態生成select下拉選單JavaScript
- JavaScript動態建立select下拉選單JavaScript
- JavaScript 騷操作JavaScript
- javascript事件操作JavaScript事件
- Laravel-admin 中 table,select 控制元件額外需求Laravel控制元件
- JS列表的下拉選單元件(仿美化控制元件select)JS控制元件
- jQuery的radio,checkbox,select操作jQuery