提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

js操作select与option(示例讲解)

JS 操作 示例 讲解 SELECT option
2023-06-13 09:15:14 时间

1.动态创建select

复制代码代码如下:

    functioncreateSelect(){

varmySelect=document.createElement_x("select");
         mySelect.id="mySelect";
         document.body.appendChild(mySelect);
     }


2.添加选项option
复制代码代码如下:

    functionaddOption(){

         //根据id查找对象，
          varobj=document.getElementByIdx_x("mySelect");

          //添加一个选项
obj.add(newOption("文本","值"));   //这个只能在IE中有效
        obj.options.add(newOption("text","value"));//这个兼容IE与firefox
    }


3.删除所有选项option
复制代码代码如下:
    functionremoveAll(){
          varobj=document.getElementByIdx_x("mySelect");
obj.options.length=0;

    }


4.删除一个选项option
复制代码代码如下:
functionremoveOne(){
          varobj=document.getElementByIdx_x("mySelect");

          //index,要删除选项的序号，这里取当前选中选项的序号

varindex=obj.selectedIndex;
obj.options.remove(index);
    }


5.获得选项option的值

varobj=document.getElementByIdx_x("mySelect");
varindex=obj.selectedIndex;//序号，取当前选中选项的序号
varval=obj.options[index].value;

6.获得选项option的文本

varobj=document.getElementByIdx_x("mySelect");
varindex=obj.selectedIndex;//序号，取当前选中选项的序号
varval=obj.options[index].text;

7.修改选项option

varobj=document.getElementByIdx_x("mySelect");
varindex=obj.selectedIndex;//序号，取当前选中选项的序号
varval=obj.options[index]=newOption("新文本","新值");

8.删除select

复制代码代码如下:
functionremoveSelect(){
varmySelect=document.getElementByIdx_x("mySelect");
mySelect.parentNode.removeChild(mySelect);
    }

整个实例的完整代码如下：
复制代码代码如下:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.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)
   {
    returndocument.getElementByIdx_x(id)
   }
   functionshow()
   {
    varselectObj=$("area")
    varmyOption=document.createElement_x("option")
    myOption.setAttribute("value","10")
    myOption.appendChild(document.createTextNode("上海"))
    varmyOption1=document.createElement_x("option")
    myOption1.setAttribute("value","100")
    myOption1.appendChild(document.createTextNode("南京"))
    selectObj.appendChild(myOption)
    selectObj.appendChild(myOption1)
   }
   functionchoice()
   {
    varindex=$("area").selectedIndex;
    varval=$("area").options[index].getAttribute("value")
    if(val==10)
    {
     vari=$("context").childNodes.length-1;
    varremobj=$("context").childNodes[i];
    remobj.removeNode(true)
     varsh=document.createElement_x("select")
     sh.add(newOption("浦东新区","101"))
     sh.add(newOption("黄浦区","102"))
     sh.add(newOption("徐汇区","103"))
     sh.add(newOption("普陀区","104"))
     $("context").appendChild(sh)
    }
    if(val==100)
    {
     vari=$("context").childNodes.length-1;
    varremobj=$("context").childNodes[i];
    remobj.removeNode(true)
     varnj=document.createElement_x("select")
     nj.add(newOption("玄武区","201"))
     nj.add(newOption("白下区","202"))
     nj.add(newOption("下关区","203"))
     nj.add(newOption("栖霞区","204"))
     $("context").appendChild(nj)
    }
   }
   functioncalc()
   {
    varx=$("context").childNodes.length-1;
    alert(x)
   }
   functionremove()
   {
    vari=$("context").childNodes.length-1;
    varremobj=$("context").childNodes[i];
    remobj.removeNode(true)
   }
  </script>
<body>
<divid="context">
  <selectid="area"onchange="choice()">
  </select>
</div>
<inputtype=buttonvalue="显示"onclick="show()">
<inputtype=buttonvalue="计算结点"onclick="calc()">
<inputtype=buttonvalue="删除"onclick="remove()">
</body>
</html>

改进版：在select中添加、修改、删除option元素
复制代码代码如下:
functionwatch_ini(){//初始
for(vari=0;i<arguments.length;i++){
varword=document.createElement_x("OPTION");
word.text=arguments[i];
watch.keywords.add(word);//watch.isformname
}
}
functionwatch_add(f){//增加
varword=document.createElement_x("OPTION");
word.text=f.word.value;
f.keywords.add(word);
}

但上述add()方法只在IE下有效，为兼容FF和Opera，对上述代码进行了一下改进，改动后代码如下：
复制代码代码如下:
functionwatch_ini(){//初始
for(vari=0;i<arguments.length;i++){
  varoOption=newOption(arguments[i],arguments[i]);
  document.getElementByIdx_x("MySelect")[i]=oOption;
}
}
functionwatch_add(f){//增加
  varoOption=newOption(f.word.value,f.word.value);
  f.keywords[f.keywords.length]=oOption;
}

整个实例的完整代码如下：
复制代码代码如下:
<!doctypehtmlpublic"-//w3c//dtdhtml4.0transitional//en">
<html>
<head>
<title>javascriptselectoptionstextvalue</title>
<metaname="keywords"content="javascriptselectoptionstextvalueaddmodifydeleteset">
<metaname="description"content="javascriptselectoptionstextvalueaddmodifydeleteset">
<scriptlanguage="javascript">
<!--
functionwatch_ini(){//初始
for(vari=0;i<arguments.length;i++){
  varoOption=newOption(arguments[i],arguments[i]);
  document.getElementByIdx_x("MySelect")[i]=oOption;
}
}
functionwatch_add(f){//增加
  varoOption=newOption(f.word.value,f.word.value);
  f.keywords[f.keywords.length]=oOption;
}
functionwatch_sel(f){//编辑
f.word.value=f.keywords[f.keywords.selectedIndex].text;
}
functionwatch_mod(f){//修改
f.keywords[f.keywords.selectedIndex].text=f.word.value;
}
functionwatch_del(f){//删除
f.keywords.remove(f.keywords.selectedIndex);
}
functionwatch_set(f){//保存
varset="";
for(vari=0;i<f.keywords.length;i++){
set+=f.keywords[i].text+";";
}
confirm(set);
}
//-->
</script>
</head>
<body>
<formname="watch"method="post"action="">
<selectid="MySelect"name="keywords"size="10"onchange="watch_sel(this.form)"></select><br>
<scriptlanguage="javascript">
<!--
watch_ini("我","你","??","他","她","它","尔");//初始关键词
//-->
</script>
<inputtype="text"name="word"/><br/>
<inputtype="button"value="增加"onclick="watch_add(this.form);"/>
<inputtype="button"value="修改"onclick="watch_mod(this.form);"/>
<inputtype="button"value="删除"onclick="watch_del(this.form);"/>
<inputtype="button"value="保存"onclick="watch_set(this.form);"/>
</form>

用一个字符串创建一个数组方法:
复制代码代码如下:
<scriptlanguage="javascript">  

</body>
</html>
<script>
functionspli(){
datastr="2,2,3,5,6,6";     
varstr=newArray();   
  str=datastr.split(",");     
   for(i=0;i<str.length;i++)  
    {document.write(str[i]+"<br/>"); }  
}  
spli();  
</script>


今天调试了一段js，在ie上运行良好，在火狐上调试出现错误，查资料发现

obj.add(newOption("文本","值"));   //这个只能在IE中有效
        obj.options.add(newOption("text","value"));//这个兼容IE与firefox

因为这段代码，在网上查资料收藏了这篇文章，实时的温故js

相关文章