js 操作select和option

左手的ㄟ右手 2021-09-25 16:32 354阅读 0赞

# [js 操作select和option][js _select_option] #

**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(newOption("文本","值"));**   //这个只能在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,要删除选项的序号，这里取当前选中选项的序号

**varindex=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\]=newOption("新文本","新值");**

**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>  
   <metahttp-equiv="Content-Type"content="text/html">  
<head>  
   <scriptlanguage=JavaScript>  
    function$(id)  
    \{  
    return document.getElementByIdx\_x(id)  
    \}  
    functionshow()  
    \{  
    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)  
    \}  
    functionchoice()  
    \{  
    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)  
    \}  
    \}  
    functioncalc()  
    \{  
    var x=$("context").childNodes.length-1;  
    alert(x)  
    \}  
    functionremove()  
    \{  
    var i=$("context").childNodes.length-1;  
    var remobj=$("context").childNodes\[i\];  
    remobj.removeNode(true)  
    \}  
  </script>  
<body>  
<div id="context">  
   <selectid="area" οnchange="choice()">  
  </select>  
</div>  
<input type=button value="显示"οnclick="show()">  
<input type=button value="计算结点"οnclick="calc()">  
<input type=button value="删除"οnclick="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，对上述代码进行了一下改进，改动后代码如下： functionwatch\_ini()\{ // 初始  
for(var i=0; i<arguments.length; i++)\{  
   var oOption=newOption(arguments\[i\],arguments\[i\]);  
  document.getElementByIdx\_x("MySelect")\[i\]=oOption;  
\}  
\}  
function watch\_add(f)\{ // 增加  
   var oOption=newOption(f.word.value,f.word.value);  
  f.keywords\[f.keywords.length\]=oOption;  
\}

**整个实例的完整代码如下：**

<!doctype html public "-//w3c//dtd html 4.0transitional//en">  
<html>  
<head>  
<title>javascript select options textvalue</title>  
<meta name="keywords" content="javascript selectoptions text value add modify delete set">  
<meta name="description" content="javascript selectoptions text value add modify delete set">  
<scriptlanguage="javascript">  
  
</script>  
</head>  
<body>  
<form name="watch" method="post"action="">  
<select id="MySelect" name="keywords" size="10"οnchange="watch\_sel(this.form)"></select><br>  
<scriptlanguage="javascript">  
  
</script>  
<input type="text" name="word"/><br />  
<input type="button" value="增加"οnclick="watch\_add(this.form);" />  
<input type="button" value="修改"οnclick="watch\_mod(this.form);" />  
<input type="button" value="删除"οnclick="watch\_del(this.form);" />  
<input type="button" value="保存"οnclick="watch\_set(this.form);" />  
</form>

用一个字符串创建一个数组方法:

<scriptlanguage="javascript">

1.  </body>  
    </html>
2.  <script>
3.  **function** spli()\{ 
4.  datastr="2,2,3,5,6,6";     
5.  **var** str= **new** Array();    
6.    str=datastr.split(",");     
7.      **for** (i=0;i<str.length;i++ )   
8.      \{ document.write(str\[i\]+"<br/>");  \}  
9.  \}  
10. spli();  
11. </script
    
    今天调试了一段js，在ie上运行良好，在火狐上调试出现错误，查资料发现
    
    **obj.add(new Option("文本","值"));**    //这个只能在IE中有效  
            obj.options.add(new Option("text","value"));//这个兼容IE与firefox
    
    因为这段代码，在网上查资料收藏了这篇文章，实时的温故js
    
    共勉！！

[js _select_option]: http://www.cnblogs.com/dchly/archive/2012/11/07/2759250.html