`
mllongze
  • 浏览: 82714 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

DOM 创建 Select 加入Option

IEFirefoxJavaScriptHTML 
阅读更多
（转载....）
注意:Option中的O是要大写的，不然语法报错

1.动态创建select

      function createSelect(){

       var mySelect = document.createElement("select");
          mySelect.id = "mySelect"; 
          document.body.appendChild(mySelect);
      }

2.添加选项option

     function addOption(){

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

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

3.删除所有选项option

     function removeAll(){
           var obj=document.getElementById('mySelect');
 
        obj.options.length=0; 

     }

4.删除一个选项option

function removeOne(){
           var obj=document.getElementById('mySelect');

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

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

5.获得选项option的值

var obj=document.getElementById('mySelect');

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

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

6.获得选项option的文本

var obj=document.getElementById('mySelect');

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

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

7.修改选项option

var obj=document.getElementById('mySelect');

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

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

8.删除select

      function removeSelect(){
            var mySelect = document.getElementById("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.getElementById(id)
    }
  
    function show()
    {
     var selectObj=$("area")
     var myOption=document.createElement("option")
     myOption.setAttribute("value","10")
     myOption.appendChild(document.createTextNode("上海"))
   
     var myOption1=document.createElement("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("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("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" onchange="choice()">
   </select>
</div>
<input type=button value="显示" onclick="show()">
<input type=button value="计算结点" onclick="calc()">
<input type=button value="删除" onclick="remove()">
</body>
</html>
改进版：在select中添加、修改、删除option元素

function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i++){
var word = document.createElement("OPTION");
word.text = arguments[i];
watch.keywords.add(word); // watch. is form name
}
}
function watch_add(f){ // 增加
var word = document.createElement("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.getElementById("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">
<!--
// Author: i@lxl.cn
// Modify: i@cnlei.com
function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i++){
   var oOption=new Option(arguments[i],arguments[i]);
   document.getElementById("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" onchange="watch_sel(this.form)"></select><br>
<script language="javascript">
<!--
watch_ini("我","你","你","他","她","它","尔"); // 初始关键词
//-->
</script>
<input type="text" name="word" /><br />
<input type="button" value="增加" onclick="watch_add(this.form);" />
<input type="button" value="修改" onclick="watch_mod(this.form);" />
<input type="button" value="删除" onclick="watch_del(this.form);" />
<input type="button" value="保存" onclick="watch_set(this.form);" />
</form>
</body>
</html>

var echkbox=document.createElement("input");
echkbox.setAttribute("type","checkbox");
echkbox.setAttribute("id","inputid");
echkbox.setAttribute("name","inputname");
echkbox.setAttribute("value","inputvalue");
echkbox.setAttribute("checked","checked");
var addhere=document.getElementById("someElementId");
addhere.appendChild(echkbox);
alert(document.getElementById("inputid").checked);

ie7显示出来的checkbox居然是未选中的但是alert出来的却是true，而FF一切正常
后来查了半天资料说是ie显示的时候只对状态改变比较敏感
改成
var echkbox=document.createElement("input");
echkbox.setAttribute("type","checkbox");
echkbox.setAttribute("id","inputid");
echkbox.setAttribute("name","inputname");
echkbox.setAttribute("value","inputvalue");
var addhere=document.getElementById("someElementId");
addhere.appendChild(echkbox);
echkbox.setAttribute("checked","checked");
alert(document.getElementById("inputid").checked);

一切ok
radio同样是这种情况。
分享到：
| Hibernate继承分页BUG解决方法之一
评论
发表评论

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

相关推荐

    js实现动态生成select中的option

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

    Html dom中的select, option_ 级联下拉列表

    总结以上内容，HTML DOM中的select, option级联下拉列表的学习涉及到DOM查找、表单验证、创建节点等基础知识。熟练掌握这些知识对于提升前端开发能力至关重要。对于任何一个初学者来说，都需要通过大量的练习和应用...

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

    在这个例子中，我们定义了两个函数：`createOption`用于创建Option元素，`addOption`则用于将创建的Option添加到指定的Select中。我们还创建了一个数组`optionsData`来模拟动态获取的数据，然后遍历这个数组，为每个...

    Jquery 操作 Dom 标签 select

    `&lt;select&gt;` 标签用于创建一个下拉列表。使用 jQuery 获取或设置 `&lt;select&gt;` 元素的值非常方便： 1. **获取选中的值**： ```javascript var selectedValue = $('#select_id').val(); console.log(selectedValue);...

    jquery获得select option值

    使用jQuery可以方便地创建并添加新的`&lt;option&gt;`元素到下拉列表中。 2. **清空下拉列表的所有选项**： ```javascript $("#sel").empty(); ``` 使用`.empty()`方法可以清空下拉列表的所有选项。 以上就是从给定...

    向元素中动态添加option

    接下来，要将这个新创建的`&lt;option&gt;`元素添加到`&lt;select&gt;`元素中，我们需要找到目标`&lt;select&gt;`元素，这通常通过其`id`属性完成，例如：`var selectElement = document.getElementById('selectId')`。之后，使用`....

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

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

    HTML DOM基础教程（网页形式）

    HTML DOM DOM 首页 DOM 简介 DOM 节点 DOM 节点树 DOM 节点访问 DOM 节点信息 DOM How To DOM 参考 ...DOM Option DOM Select DOM Style DOM Table DOM TableCell DOM TableRow DOM Textarea

    Jquery操作Select option整理

    jQuery作为一种流行的JavaScript库，极大地简化了DOM操作的过程，使得处理`&lt;select&gt;`元素变得简单高效。本文档汇总了一系列关于如何使用jQuery来操作`&lt;select&gt;`元素及其`&lt;option&gt;`子元素的方法，旨在为前端开发者...

    jquery实现 两个select之间option的转移操作

    `&lt;select&gt;`元素用于创建下拉列表，而`&lt;option&gt;`元素则表示下拉列表中的可选项。在HTML中，多个`&lt;option&gt;`标签可以嵌套在`&lt;select&gt;`中，用户可以在这些选项中进行选择。 在jQuery中，我们可以方便地通过类选择器、ID...

    js select option

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

    JS更改select内option属性的方法

    首先，要更改select内的option属性，需要获取select元素的DOM引用。这通常通过document.getElementById()方法来实现，该方法接受一个ID字符串作为参数，返回匹配的DOM元素。例如，在文档中有一个select元素，其id为'...

    用jquery获取select标签中选中的option值及文本的示例

    - 方法一：通过id选择器获取select标签，然后使用":selected"伪类选择器找到当前选中的option，接着使用.text()方法获取选中的option的文本内容。代码为`$("#sel option:selected").text();` - 方法二：通过id选择...

    JavaScript实现select添加option

    2. 使用循环结构，通过`new Option(text, value)`创建option元素，并利用`_select.options.add(_option)`方法将其添加到select元素中。 3. 设置onchange事件处理函数，捕捉用户选中值改变的动作。 4. 最后，将select...

    页select中如何实现选择option其中一个选项，显示相关的内容

    - 创建一个`&lt;select&gt;`元素，并为其添加多个`&lt;option&gt;`元素，每个`&lt;option&gt;`的`value`属性值对应新闻标题。 - 在页面上创建一个`&lt;div&gt;`元素，用作显示新闻内容的容器。 2. **CSS样式设置**： - 通过CSS将`&lt;div&gt;`...

    js获取select默认选中的Option并不是当前选中值

    js函数方法： 代码如下: [removed]... try { opts = document.getElementById(selectId).getElementsByTagName(‘option’); for (var i in opts) { if (opts[i].defaultSelected) { dom = opts[i]; break; } } } catch

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

    对于纯JavaScript的实现，我们可以创建一个`&lt;select&gt;`元素，并为它添加`onchange`事件监听器。当用户改变选中的`&lt;option&gt;`时，`gradeChange`函数会被调用。在该函数中，我们通过`getElementById`获取`&lt;select&gt;`元素...

    java Script ,jquery 写的 select 中的option 左右移动，上下移动

    `&lt;select&gt;` 元素用于创建下拉菜单，而`&lt;option&gt;` 是其中的各个选项。例如： ```html &lt;select id="mySelect"&gt; &lt;option value="1"&gt;Option 1&lt;/option&gt; &lt;option value="2"&gt;Option 2&lt;/option&gt; &lt;option value="3"&gt;...

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