jquery中给select2赋值 js如何给select赋值

转载

智能开发先锋 2024-08-02 22:29:22

文章标签 jquery中给select2赋值 html javascript i++ 文章分类 jQuery 前端开发

使用js过程中难免会碰到操作select和option的状况，本人也是深有同感，于是搜集整理一些常用且使用的代码，可供大家分享

1、获取选中select的value和text,html代码如下：

复制代码代码如下:

<select id="mySelect">  
  
 <option value="1">one</option>  
  
 <option value="2">two</option>  
  
 <option value="3">three</option>  
  
 </select>

则可通过以下script代码s来获取选中的value和text

复制代码代码如下:

$("#mySelect").val(); //获取选中记录的value值  
  
 $("#mySelect option:selected").text(); //获取选中记录的text值

2、运用new Option("文本","值")方法添加选项option

复制代码代码如下:

var obj = document.getElementById("mySelect");obj.add(new Option("4","4"));

3、删除所有选项option

复制代码代码如下:

var obj = document.getElementById("mySelect");obj.options.length = 0;

4、删除选中选项option

复制代码代码如下:

var obj = document.getElementById("mySelect");var index = obj.selectedIndex;obj.options.remove(index);

5、修改选中选项option

复制代码代码如下:

var obj = document.getElementById("mySelect");  
  
 var index = obj.selectedIndex;  
  
 obj.options[index] = new Option("three",3); //更改对应的值  
  
 obj.options[index].selected = true; //保持选中状态

6、删除select

复制代码代码如下:

var obj = document.getElementById("mySelect");  
  
 obj.parentNode.removeChild(obj); //移除当前对象

7、select选择的响应事件

复制代码代码如下:

$("#mySelect").change(function(){ //添加所需要执行的操作代码})

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" ο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，对上述代码进行了一下改进，改动后代码如下：

复制代码代码如下:

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" οnchange="watch_sel(this.form)"></select><br>  
  
 <script language="javascript">  
  
 <!--  
  
 watch_ini("我","你","妳","他","她","它","尔"); // 初始关键词  
  
 //-->  
  
 </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>

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

复制代码代码如下:

<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

共勉！

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：方程式配平python算法方程式配平规则

下一篇：iOS开发放大和平移图片 ios放大模式怎么开

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

jquery中给select2赋值 js如何给select赋值

jquery中给select2赋值 js如何给select赋值

51CTO博客