`

动态创建selectjs 操作select和option

 
阅读更多

转自：http://blog.csdn.net/a313976010/article/details/6728646

 

1.动态创建select

[javascript] view plaincopyprint?
  1. function createSelect(){
  2. var mySelect = document.createElement("select");
  3. mySelect.id = "mySelect";
  4. document.body.appendChild(mySelect);
  5. }
function createSelect(){
          var mySelect = document.createElement("select");
          mySelect.id = "mySelect"; 
          document.body.appendChild(mySelect);
      }

2.添加选项option

[javascript] view plaincopyprint?
  1. function addOption(){
  2. //根据id查找对象，
  3. var obj=document.getElementById('mySelect');
  4. //添加一个选项
  5. obj.add(new Option("文本","值")); //这个只能在IE中有效
  6. obj.options.add(new Option("text","value")); //这个兼容IE与firefox
  7. }
 function addOption(){

          //根据id查找对象，
           var obj=document.getElementById('mySelect');

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

3.删除所有选项option

[javascript] view plaincopyprint?
  1. function removeAll(){
  2. var obj=document.getElementById('mySelect');
  3. obj.options.length=0;
  4. }
  function removeAll(){
           var obj=document.getElementById('mySelect');
           obj.options.length=0;

     }

4.删除一个选项option

[javascript] view plaincopyprint?
  1. function removeOne(){
  2. var obj=document.getElementById('mySelect');
  3. //index,要删除选项的序号，这里取当前选中选项的序号
  4. var index=obj.selectedIndex;
  5. obj.options.remove(index);
  6. }
function removeOne(){
           var obj=document.getElementById('mySelect');

           //index,要删除选项的序号，这里取当前选中选项的序号
           var index=obj.selectedIndex;
           obj.options.remove(index);
     }

5.获得选项option的值

[javascript] view plaincopyprint?
  1. var obj=document.getElementById('mySelect');
  2. var index=obj.selectedIndex; //序号，取当前选中选项的序号
  3. var val = obj.options[index].value;
var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index].value;


6.获得选项option的文本

[javascript] view plaincopyprint?
  1. var obj=document.getElementById('mySelect');
  2. var index=obj.selectedIndex; //序号，取当前选中选项的序号
  3. var val = obj.options[index].text;
var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index].text;

 

7.修改选项option

[javascript] view plaincopyprint?
  1. var obj=document.getElementById('mySelect');
  2. var index=obj.selectedIndex; //序号，取当前选中选项的序号
  3. var val = obj.options[index]=new Option("新文本","新值");
var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index]=new Option("新文本","新值");


8.删除select

[javascript] view plaincopyprint?
  1. function removeSelect(){
  2. var mySelect = document.getElementById("mySelect");
  3. mySelect.parentNode.removeChild(mySelect);
  4. }
function removeSelect(){
            var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
     }

 

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

[html] view plaincopyprint?
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html">
  5. <head>
  6. <script language=JavaScript>
  7. function $(id)
  8. {
  9. return document.getElementById(id)
  10. }
  11. function show()
  12. {
  13. var selectObj=$("area")
  14. var myOption=document.createElement("option")
  15. myOption.setAttribute("value","10")
  16. myOption.appendChild(document.createTextNode("上海"))
  17. var myOption1=document.createElement("option")
  18. myOption1.setAttribute("value","100")
  19. myOption1.appendChild(document.createTextNode("南京"))
  20. selectObj.appendChild(myOption)
  21. selectObj.appendChild(myOption1)
  22. }
  23. function choice()
  24. {
  25. var index=$("area").selectedIndex;
  26. var val=$("area").options[index].getAttribute("value")
  27. if(val==10)
  28. {
  29. var i=$("context").childNodes.length-1;
  30. var remobj=$("context").childNodes[i];
  31. remobj.removeNode(true)
  32. var sh=document.createElement("select")
  33. sh.add(new Option("浦东新区","101"))
  34. sh.add(new Option("黄浦区","102"))
  35. sh.add(new Option("徐汇区","103"))
  36. sh.add(new Option("普陀区","104"))
  37. $("context").appendChild(sh)
  38. }
  39. if(val==100)
  40. {
  41. var i=$("context").childNodes.length-1;
  42. var remobj=$("context").childNodes[i];
  43. remobj.removeNode(true)
  44. var nj=document.createElement("select")
  45. nj.add(new Option("玄武区","201"))
  46. nj.add(new Option("白下区","202"))
  47. nj.add(new Option("下关区","203"))
  48. nj.add(new Option("栖霞区","204"))
  49. $("context").appendChild(nj)
  50. }
  51. }
  52. function calc()
  53. {
  54. var x=$("context").childNodes.length-1;
  55. alert(x)
  56. }
  57. function remove()
  58. {
  59. var i=$("context").childNodes.length-1;
  60. var remobj=$("context").childNodes[i];
  61. remobj.removeNode(true)
  62. }
  63. </script>
  64. <body>
  65. <div id="context">
  66. <select id="area" onchange="choice()">
  67. </select>
  68. </div>
  69. <input type=button value="显示" onclick="show()">
  70. <input type=button value="计算结点" onclick="calc()">
  71. <input type=button value="删除" onclick="remove()">
  72. </body>
  73. </html>
分享到：
| properties读取工具类设计
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js实现动态生成select中的option

    在JavaScript中，我们可以通过DOM操作来创建和添加`option`元素。首先，我们需要一个数组来存储下拉列表的数据，这些数据可以是字符串，也可以是对象，取决于我们的具体需求。 以下是一个基本的步骤： 1. **准备...

    JS动态添加Select中的Option元素值

    以下是一个简单的示例，展示了如何使用JavaScript动态创建并添加Option元素到Select中： ```html &lt;!DOCTYPE html&gt; 动态添加Option &lt;select id="select1"&gt;&lt;/select&gt; &lt;select id="select2"&gt;&lt;/select&gt; // ...

    js 操作select和option

    &lt;title&gt;JS 操作 Select 和 Option function $(id) { return document.getElementById(id); } function show() { var selectObj = $("area"); var myOption = document.createElement("option"); ...

    JS动态添加option和删除option(附实例代码)

    1.动态创建select 代码如下: function createSelect(){ var mySelect = document.createElement(“select”); mySelect.id = “mySelect”; document.body.appendChild(mySelect); } 2.添加选项option 代码如下: ...

    select option带自定义图片

    总结来说，要实现`&lt;select&gt;`和`&lt;option&gt;`带有自定义图片的效果，我们需要结合HTML的`data-*`属性，JavaScript的动态操作和CSS的样式设计。这不仅增强了用户体验，也展示了前端技术在实现视觉效果方面的灵活性。在...

    js select option

    在JavaScript编程中，`select`元素和`option`标签是创建下拉列表的重要部分。`select`用于定义一个选择框，而`option`则用于在选择框中添加可选项。在网页交互中，用户通常会使用这样的下拉列表来从预设的选项中做出...

    JS更改select内option属性的方法

    通过这种动态操作，开发者可以创建更为动态和响应式的网页界面，从而提升用户体验。 总结来说，JavaScript为我们提供了强大的能力来操纵DOM，包括对select元素内option属性的更改。通过实践示例，我们可以看到，...

    js之Select用法

    在本文中，我们将深入探讨`select`的用法，包括如何创建、操作和处理`select`元素的各种事件。 1. **创建基本的`select`元素** ```html &lt;select id="mySelect"&gt; &lt;option value="option1"&gt;Option 1&lt;/option&gt; ...

    select将选中的option设置为默认选项

    在网页开发中，`&lt;select&gt;`元素用于创建下拉列表，而`&lt;option&gt;`标签则定义了下拉列表中的选项。有时候，我们可能需要在页面加载时预设一个选项为默认选中状态，或者根据用户操作动态改变选中状态。在JavaScript中，这...

    select2js，css和中文包

    5. **数据源**：Select2不仅能够从传统的HTML`&lt;option&gt;`元素中获取数据，还可以从远程API或者JavaScript数组动态加载选项。 6. **事件和API**：Select2提供了丰富的事件（如open、close、select、unselect等）和API...

    自定义带图标的select，只需把图标地址写在option的title属性中即可

    这个JS插件就是为了解决这个问题，它扩展了`&lt;select&gt;`的功能，允许我们在`&lt;option&gt;`的`title`属性中插入图标地址，然后在界面上动态渲染这些图标。 接下来，我们要探讨如何使用这个插件。在项目中，首先需要引入...

    js 操作select和option常用代码整理

    8. **动态创建`select`** 使用`createElement_x("select")`可以创建新的`select`元素，并设置其`id`属性，最后将其添加到DOM中。 9. **添加选项的兼容性问题** 在不同浏览器中，添加`option`的方法可能不同。`add...

    JS实现select选中option触发事件操作示例

    在该函数中，我们通过`getElementById`获取`&lt;select&gt;`元素，然后使用`options`属性和`selectedIndex`属性来获取当前选中的`&lt;option&gt;`。最后，我们可以访问选中`&lt;option&gt;`的自定义属性，如`grade`，并弹出警告框显示...

    JS & JQuery 动态添加 select option

    本文将详细介绍如何使用JavaScript（JS）和jQuery两种方式来实现`&lt;select&gt;`元素中的`&lt;option&gt;`选项的动态添加，并探讨它们之间的区别。 ### JavaScript动态添加`&lt;option&gt;` 在纯JavaScript中，我们可以通过`document...

    JS 通过系统时间限定动态添加 select option的实例代码

    在JavaScript中，动态地向`&lt;select&gt;`元素添加`&lt;option&gt;`是常见的需求，尤其是在创建交互式表单或实现特定功能时。这个实例代码展示了一种根据系统当前时间和条件来决定是否添加特定选项的方法。下面将详细解释这个...

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

    这些操作包括动态创建select元素、添加和删除option选项、清空所有选项、获取选中项的值和文本以及修改和删除select元素。掌握这些操作对于进行网页交互式界面设计十分重要，也是前端开发者必须具备的基础技能之一。

    js 加载select 项

    4. 将`option`添加到`select`中：使用`appendChild`或`add`方法将新创建的`option`添加到`select`元素中。 ```javascript selectElement.appendChild(newOption); ``` 现在，我们转向`JSelect`库。`JSelect`提供了...

    select级联框 js json 全动态

    总结，"select级联框 js json 全动态"是一个利用jQuery和JSON数据实现的动态交互功能，它通过监听用户的选择，动态地生成和更新选择框的内容，为用户提供流畅的多级选择体验。在实际项目中，这样的功能可以大大增强...

    使用js对select动态添加和删除OPTION示例代码

    以上代码示例展示了如何在JavaScript中处理`&lt;select&gt;`元素和其`&lt;option&gt;`子元素，这对于创建动态的、响应式的网页非常重要。例如，当用户触发某个事件（如点击按钮或输入数据）时，可以动态地更新下拉列表，以反映新...

    js控制select相关方法

    这个标签用于创建下拉列表，可以通过JS来实现对下拉列表的选择、添加、删除和更新等操作。以下是对标题和描述中提到的JavaScript控制`select`相关方法的详细说明： 1. **判断 select 选项中 是否存在 Value=...

Magicbox
Global site tag (gtag.js) - Google Analytics