动态给select添加选项的常用方法

最新推荐文章于 2023-11-30 20:21:41 发布
最新推荐文章于 2023-11-30 20:21:41 发布
阅读量185 收藏
点赞数
分类专栏： JavaScript 文章标签： IE HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huxiuliang/article/details/83263115
版权
  1. <html>  
  2. <head>  
  3. <script>  
  4.   
  5.   
  6.  var city = new  Array();  
  7.  city[0 ]= "西安" ;  
  8.  city[1 ]= "乌鲁木齐" ;  
  9.  city[2 ]= "西宁" ;  
  10.  city[3 ]= "北京" ;  
  11.  function objectF()  
  12.  {  
  13.  
  14.   //object方式添加
  15.   var s = document.getElementById("object" );  
  16.   for (var i= 0 ;i<city.length;i++)  
  17.   {  
  18.    var option = new  Option(city[i],i);  
  19.    s.options[i]=option;  
  20.      
  21.   }  
  22.  }  
  23.  function domF()  
  24.  { 
  25.  / / 基于dom方式的添加
  26.   var s = document.getElementById("dom" );  
  27.   for  (var i= 0 ;i<city.length;i++)  
  28.   {  
  29.    var option = document.createElement("option" );  
  30.    var text = document.createTextNode(city[i]);  
  31.    option.appendChild(text);  
  32.    option.value=i;  
  33.    s.appendChild(option);  
  34.     
  35.   }  
  36.  }  
  37.  function innerF()  
  38.  {  
  39.  
  40. // 使用innerHTML添加 在ie中有时会出错
  41.   var sel = document.getElementById("inner" );  
  42.   var str = "<select >" ;  
  43.   for  (var i= 0 ;i<city.length;i++)  
  44.   {  
  45.    str = str + "<option value='" +i+ "'>" +city[i]+ "</option>"   
  46.   }  
  47.   str=str+"</select >" ;  
  48.   sel.innerHTML=str;  
  49.  }  
  50. </script>  
  51. </head>  
  52. <body>  
  53. <form>  
  54. <table>  
  55.  <tr>  
  56.   <td>  
  57.    <select  ></select >  
  58.   </td>  
  59.   <td>  
  60.    <select  ></select >  
  61.   </td>  
  62.   <td>  
  63.    <div >  
  64.     <select ></select >  
  65.    </div>  
  66.   </td>  
  67.  </tr>  
  68.  <tr>  
  69.   <td><input type="button"  value= "dom"  ></td>  
  70.   <td><input type="button"  value= "object"  ></td>  
  71.   <td><input type="button"  value= "inner"  ></td>  
  72.  </tr>  
  73. </table>  
  74. </body>  
  75.   
  76. </html> 
huxiuliang
关注
专栏目录
html query动态为select加入选项,HTML标签 select 里 动态添加option
weixin_29696999的博客
06-07 1530
HTML标签 select 里 动态添加option:☆ var today = new Date();var yearNow = today.getFullYear();var optiongYears_className = [yearNow, yearNow+1];var $selyear = $("select#classNameYear_add");$.each(optiongYe...
JavaScript实现select添加option
01-19
JavaScript为select添加option <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>测试文件</title> [removed] [removed] = function(){ //创建select控件 var _select = document.createElement(SELECT); //添加选项 for(var i=1; i<=10; i++){ var _option = new Option(i,i); _select.options.add(_o
下拉列表select动态添加option和获取选中的option的值和value
最新发布
withkai44的博客
11-30 6408
/动态的往select里面添加option(JS方式添加)两种方法获取选中的option的值和value。//拿到选中的option的value。//拿到选中的option的value。3、获取选中option的value。2、获取选中option的value。//Jquery动态添加option。//拿到选中的option的text。//拿到选中的option的text。2、获取选中的option的索引值。4、获取选中option的text。3、获取选中option的text。
select动态添加选项
huozhanfeng的专栏
03-16 144
语法：向一个下拉框添加属性 document.getElementById("ddlControl").options.add(new Option(text,value)); &lt;script language="javascript" type="text/javascript"&gt; //添加下拉框选项 function addOption() { var obj...
javascript中通过jquery向select选项框中添加新选项
liaomingwu的专栏
01-07 5656
javascript中通过jquery向select选项框中添加新选项
利用js给datalist或select动态添加option选项的方法
10-18
本文将详细介绍如何使用 JavaScript 为 `datalist` 或 `select` 元素动态添加 `option` 选项，这对于创建动态、可自定义的下拉列表或者输入提示至关重要。 首先，让我们解析一下 `datalist` 和 `select` 元素。`...
改变HTML下拉框SELECT选项的多种方法
09-28
在HTML中，下拉框（SELECT）是一种常用的交互元素，用于提供用户选择多个预设选项。在处理表单提交后重载页面时，通常需要保持SELECT控件的选中状态，以便用户能清晰地看到他们之前的选择。然而，单纯设置SELECT的`...
浅析JQuery获取和设置Select选项的常用方法总结
10-27
清空整个 `<select>` 元素有两种方法：`$("#selectID").empty()` 直接移除所有子元素，或者 `$("#selectID").get(0).options.length = 0` 将选项数组长度设为零。 这些 jQuery 方法简化了对 `<select>` 元素的操作...
JS & JQuery 动态添加 select option
10-22
- **为select添加事件监听**： ```javascript $("#select_id").change(function() { // 当选项变更时执行的代码 }); ``` - **获取选中项的Text和Value**： ```javascript var checkText = $("#select_id")...
用Table-Selector选出表单数据
goforu的专栏
06-21 1080
介绍Table-Selector是一款简单的jQuery插件，它可让表单变为可选，并展示出已选项。
下拉框选择selected和动态设置select选择项
weixin_34221775的博客
11-23 706
var id=$("#orderId").children('option:selected').val(); //selected选中项取值 var id=$('#orderId option:selected').val(); //原来一直都是上边的方法取值，今天刚了解到的，只要下拉框被选中后， //option的值会赋给select，name这个方法就会拿到下拉框...
select下拉框动态添加option选项
qq_41615323的博客
02-26 2716
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>select动态添加option</title> </head> <body> <select id="test"></select> </body> <script src="https://cdn.bootcss.c
给select添加自定义值和选项
weixin_33881041的博客
03-09 382
    添加选项： document.getElementById("id_select").options.add(new Option("name", "value")); 添加自定义的myVal值"value1" document.getElementById("id_select").options[0].setAttribute("myVal", &quot
JS:给select添加option选项
wcqlwyt的博客
06-14 8040
今天遇到一个问题，就是动态添加option到slect里面在ie6不成功： &lt;script&gt; var shosetype=document.createElement("selec
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值