js 操作select和option

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
1.动态创建select
 
     function createSelect(){
 
var mySelect = document.createElement_x("select");
          mySelect.id = "mySelect";
          document.body.appendChild(mySelect);
      }
 
2.添加选项option
 
     function addOption(){
 
          //根据id查找对象，
           var obj=document.getElementByIdx_x('mySelect');
 
           //添加一个选项
obj.add(new Option("文本","值"));    //这个只能在IE中有效
         obj.options.add(new Option("text","value")); //这个兼容IE与firefox
     }
 
3.删除所有选项option
 
     function removeAll(){
           var obj=document.getElementByIdx_x('mySelect');
obj.options.length=0;
 
     }
 
4.删除一个选项option
 
function removeOne(){
           var obj=document.getElementByIdx_x('mySelect');
 
           //index,要删除选项的序号，这里取当前选中选项的序号
 
var index=obj.selectedIndex;
obj.options.remove(index);
     }
 
5.获得选项option的值
 
var obj=document.getElementByIdx_x('mySelect');
 
var index=obj.selectedIndex; //序号，取当前选中选项的序号
 
var val = obj.options[index].value;
 
6.获得选项option的文本
 
var obj=document.getElementByIdx_x('mySelect');
 
var index=obj.selectedIndex; //序号，取当前选中选项的序号
 
var val = obj.options[index].text;
 
7.修改选项option
 
var obj=document.getElementByIdx_x('mySelect');
 
var index=obj.selectedIndex; //序号，取当前选中选项的序号
 
var val = obj.options[index]=new Option("新文本","新值");
 
8.删除select
 
      function removeSelect(){
            var mySelect = document.getElementByIdx_x("mySelect");
mySelect.parentNode.removeChild(mySelect);
     }
 
  
 
整个实例的完整代码如下：
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html">
<head>
   <script language=JavaScript>
    function $(id)
    {
     return document.getElementByIdx_x(id)
    }
    function show()
    {
     var selectObj=$("area")
     var myOption=document.createElement_x("option")
     myOption.setAttribute("value","10")
     myOption.appendChild(document.createTextNode("上海"))
     var myOption1=document.createElement_x("option")
     myOption1.setAttribute("value","100")
     myOption1.appendChild(document.createTextNode("南京"))
     selectObj.appendChild(myOption)
     selectObj.appendChild(myOption1)
    }
    function choice()
    {
     var index=$("area").selectedIndex;
     var val=$("area").options[index].getAttribute("value")
     if(val==10)
     {
      var i=$("context").childNodes.length-1;
     var remobj=$("context").childNodes[i];
     remobj.removeNode(true)
      var sh=document.createElement_x("select")
      sh.add(new Option("浦东新区","101"))
      sh.add(new Option("黄浦区","102"))
      sh.add(new Option("徐汇区","103"))
      sh.add(new Option("普陀区","104"))
      $("context").appendChild(sh)
     }
     if(val==100)
     {
      var i=$("context").childNodes.length-1;
     var remobj=$("context").childNodes[i];
     remobj.removeNode(true)
      var nj=document.createElement_x("select")
      nj.add(new Option("玄武区","201"))
      nj.add(new Option("白下区","202"))
      nj.add(new Option("下关区","203"))
      nj.add(new Option("栖霞区","204"))
      $("context").appendChild(nj)
     }
    }
    function calc()
    {
     var x=$("context").childNodes.length-1;
     alert(x)
    }
    function remove()
    {
     var i=$("context").childNodes.length-1;
     var remobj=$("context").childNodes[i];
     remobj.removeNode(true)
    }
   </script>
<body>
<div id="context">
   <select id="area" onchange="choice()">
   </select>
</div>
<input type=button value="显示" onclick="show()">
<input type=button value="计算结点" onclick="calc()">
<input type=button value="删除" onclick="remove()">
</body>
</html>
 
  
 
改进版：在select中添加、修改、删除option元素
 
function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i++){
var word = document.createElement_x("OPTION");
word.text = arguments[i];
watch.keywords.add(word); // watch. is form name
}
}
function watch_add(f){ // 增加
var word = document.createElement_x("OPTION");
word.text = f.word.value;
f.keywords.add(word);
}
但上述 add() 方法只在IE下有效，为兼容FF和Opera，对上述代码进行了一下改进，改动后代码如下： function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i++){
   var oOption=new Option(arguments[i],arguments[i]);
   document.getElementByIdx_x("MySelect")[i]=oOption;
}
}
function watch_add(f){ // 增加
   var oOption=new Option(f.word.value,f.word.value);
   f.keywords[f.keywords.length]=oOption;
}
 
 
整个实例的完整代码如下：
 
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>javascript select options text value</title>
<meta name="keywords" content="javascript select options text value add modify delete set">
<meta name="description" content="javascript select options text value add modify delete set">
<script language="javascript">
<!--
function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i++){
   var oOption=new Option(arguments[i],arguments[i]);
   document.getElementByIdx_x("MySelect")[i]=oOption;
}
}
function watch_add(f){ // 增加
   var oOption=new Option(f.word.value,f.word.value);
   f.keywords[f.keywords.length]=oOption;
}
function watch_sel(f){ // 编辑
f.word.value = f.keywords[f.keywords.selectedIndex].text;
}
function watch_mod(f){ // 修改
f.keywords[f.keywords.selectedIndex].text = f.word.value;
}
function watch_del(f){ // 删除
f.keywords.remove(f.keywords.selectedIndex);
}
function watch_set(f){ // 保存
var set = "";
for(var i=0; i<f.keywords.length; i++){
set += f.keywords[i].text + ";";
}
confirm(set);
}
//-->
</script>
</head>
<body>
<form name="watch" method="post" action="">
<select id="MySelect" name="keywords" size="10" onchange="watch_sel(this.form)"></select><br>
<script language="javascript">
<!--
watch_ini("我","你","妳","他","她","它","尔"); // 初始关键词
//-->
</script>
<input type="text" name="word" /><br />
<input type="button" value="增加" onclick="watch_add(this.form);" />
<input type="button" value="修改" onclick="watch_mod(this.form);" />
<input type="button" value="删除" onclick="watch_del(this.form);" />
<input type="button" value="保存" onclick="watch_set(this.form);" />
</form>
 
用一个字符串创建一个数组方法:
 
<script language="javascript">  
 
        </body>
        </html>
        <script>
        function spli(){
        datastr="2,2,3,5,6,6";     
        var str= new Array();   
           str=datastr.split(",");     
            for (i=0;i<str.length ;i++ )  
             { document.write(str[i]+"<br/>");  }  
        }  
        spli();  
        </script
 
        今天调试了一段js，在ie上运行良好，在火狐上调试出现错误，查资料发现
 
        obj.add(new Option("文本","值"));    //这个只能在IE中有效
                 obj.options.add(new Option("text","value")); //这个兼容IE与firefox
 
        因为这段代码，在网上查资料收藏了这篇文章，实时的温故js
 
        共勉！！
?
1
 
?
1
 
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
   
   
   
 
 
 
   
   
   
   
  
    
    
    
    
    
 s操作checkbox,radio,select
 
 
 
   
   
   
   
  
    
    
    
  
    
   
     
     
    博客分类： 
    
   
     
     
     
 JS
  
   
  
    
    
    
 
 
 
   
   
   
   
  
    
    
    
 
     
     
     
   
       
   
  
    
    
    
 
 
 
  
  
  
  
 
   
   
   
 
 
 
  
  
  
  
 
   
   
   
 
    
    
    
  
   
   
   
   
最近经常用JS操作 select checkbox 及radio 几个简单函数记录如下 以备查用 
 
   
 
Js代码 
function getRadioValue(radioName){   
     
      var obj = document.getElementsByName(radioName);    
      var objLen= obj.length;    
      var i;   
    for (i = 0;i< objLen;i++){   
        if (obj [i].checked==true) {   
         return obj [i].value;    
        }   
      }   
      return "";   
}            
   
   
   
//获取复选框的值   
function getCheckboxValue(radioName){   
  var obj = document.getElementsByName(radioName);    
  var objLen= obj.length;    
  var i;   
  var result="";   
for (i = 0;i<objLen;i++){   
    if (obj [i].checked==true) {   
     result+=obj [i].value+",";    
    }   
  }   
  return result;   
}   
              
//复选框 是否处于 选中状态   
function  CheckboxToChecked(eleName, cValue){   
     
  var obj = document.getElementsByName(eleName);    
     
  var objLen= obj.length;    
  var i;   
  var result="";   
for (i = 0;i<objLen;i++){   
      
    if (obj [i].value==cValue) {   
     
     obj [i].checked=true;   
    }else{   
    obj [i].checked=false;   
    }   
  }   
  return result;   
}       
          
//checkBox至少选中一项   
function chkCheckBoxChs(objNam,txt){    
var obj = document.getElementsByName(objNam);    
var objLen= obj.length;    
var num=0;   
for (i = 0;i< objLen;i++){   
if (obj [i].checked==true) {   
num++;   
}   
}   
if(num==0){   
     alert(txt);       
      return false;   
     }    
    return true;   
}  
 
function getRadioValue(radioName){ 
 
  var obj = document.getElementsByName(radioName); 
  var objLen= obj.length; 
  var i; 
for (i = 0;i< objLen;i++){ 
if (obj [i].checked==true) { 
  return   obj [i].value; 
} 
  } 
  return ""; 
}      
 
 
 
//获取复选框的值 
function getCheckboxValue(radioName){ 
  var obj = document.getElementsByName(radioName); 
  var objLen= obj.length; 
  var i; 
  var result=""; 
for (i = 0;i<objLen;i++){ 
if (obj [i].checked==true) { 
  result+=obj [i].value+","; 
} 
  } 
  return result; 
} 
   
//复选框 是否处于 选中状态 
function  CheckboxToChecked(eleName, cValue){ 
 
  var obj = document.getElementsByName(eleName); 
 
  var objLen= obj.length; 
  var i; 
  var result=""; 
for (i = 0;i<objLen;i++){ 
   
if (obj [i].value==cValue) { 
 
  obj [i].checked=true; 
}else{ 
obj [i].checked=false; 
} 
  } 
  return result; 
}
   
//checkBox至少选中一项 
function chkCheckBoxChs(objNam,txt){ 
var obj = document.getElementsByName(objNam); 
var objLen= obj.length; 
var num=0; 
for (i = 0;i< objLen;i++){ 
if (obj [i].checked==true) { 
num++; 
} 
} 
if(num==0){ 
alert(txt);
  return false; 
} 
return true; 
} 
 
 
 
 
其他 只读的属性的为 readOnly (注意大小写) 
 
 
 
Js代码 
function toReadOnly(ele ,flag){   
        var obj=document.getElementById(ele);   
        if(obj!=null){   
             if(flag==0){//可读   
                obj.readOnly=false;   
                 obj.style.backgroundColor="white";   
             }else{//只读   
                 obj.readOnly=true;   
                 obj.value="";   
                 obj.style.backgroundColor="#D8D8D8";   
             }   
      }   
    }  
 
 
 
select操作 
<html> 
 
<body> 
<script> 
function test(){ 
var obj  = document.getElementById("temp"); 
 
var value = obj.options[obj.selectedIndex].value; 
alert(value); 
} 
 
 
</script> 
<form> 
<select name="cars" id="temp" onclick="test();"> 
<option value="volvo">Volvo</option> 
<option value="saab">Saab</option> 
<option value="fiat">Fiat</option> 
<option value="audi">Audi</option> 
</select> 
</form> 
 
</body> 
</html> 
 
js获取select元素的value值和文本的方法 
 
 
 
 
 
获得选中的对象 
 
var selectobj = document.getElementById("selectId"); 
 
 
 
获得索引; 
 
 
 
var　index = selectobj.selectedIndex; 
 
 
 
获得选中的value的值 
 
 
 
var value = selectobj.options[index].value 
 
 
 
文本的值: 
 
 
 
var text = selectobj.options[index].text 
 
  
  
  
  
 
   
  
posted @   瓜瓜先生  阅读(11)  评论(0)  编辑  收藏  举报  
相关博文：
·  Myeclipse 操作技巧
·  jquery 清空file
·  jquery select 操作
·  js 获取select的值 / js动态给select赋值
·  JS中的new option(), options
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 使用C#创建一个MCP客户端
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae