>

javascript对select标签的调整(option选项/select)

- 编辑:乐百家599手机首页 -

javascript对select标签的调整(option选项/select)

剔除一个<option>标签-----obj.options.remove(obj.selectedIndex)<删>

复制代码 代码如下:

e. options= new Option("文本","值") ;

复制代码 代码如下:

二 应用

复制代码 代码如下:

<html>
<head>
<script language="javascript">
function number(){
var obj = document.getElementById("mySelect");
    //obj.options[obj.selectedIndex] = new Option("小编的吃吃","4");//在现阶段相中的不胜的值中改动
    //obj.options.add(new Option("作者的吃吃","4"));再增添四个option
    //alert(obj.selectedIndex);//展现序号,option自个儿设置的
    //obj.options[obj.selectedIndex].text = "笔者的吃吃";改造值
   //obj.remove(obj.selectedIndex);删除成效
}
</script>
</head>
<body>
<select id="mySelect">
     <option>小编的手袋</option>
     <option>作者的书本</option>
     <option>小编的油油</option>
     <option>作者的担子</option>
</select>
<input type="button" name="button" value="查看结果" onclick="number();">
</body>
</html>

7.改造选项option

length属性---------长度属性

依靠这个东西,自身用JQEU汉兰达Y AJAX JSON实现了贰个小效用如下:
JS代码:(只取了于SELECT相关的代码)

   } 

5.拿走选项option的值

value属性------返回/指定 值,与<options value="...">一致。

javascript对它们的操作 一、基础明白 复制代码 代码如下: var e = document.getElementById("sel...

  </select>
</td>
  </tr>
  <tr>
<td class="Search_item">退化构件:</td>
<td  class="Search_content" id="thgj">
   <select name="thgjDm" style="width:160" id="thgjDm">
<option value="-1" selected>无</option>
   </select>
</td>
  </tr>
</TABLE>

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

text属性---------返回/指定 文本

function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" ";
<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" on
change="choice()">
</select>
</div>
<input type=button value="显示" onclick="show()">
<input type=button value="总计结点" onclick="calc()">
<input type=button value="删除" onclick="remove()">
</body>
</html>

充实贰个<option>标签-----obj.options.add(new("文本","值"));<增>

html中的select标签,也是asp.net中的asp:DropDownList控件。
javascript对它们的操作
一、基础精晓

<TABLE width="100%" border=0 align="left" cellPadding=0 cellSpacing=1>
  <tr>
<td  class="Search_item_18">  <span class="Edit_mustinput">*</span>援引软件:</td>
<td  class="Search_content_82">
<input name="yyrjMc" id="yyrjMc" type="text" class="Search_input" tabindex="3"  size="30" >
<input name="yyrjDm" id="yyrjDm" type="hidden" >
<input type="button" class="Search_button_select"
onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="选择...">
</td>
  </tr>
  <tr>
<td class="Search_item"> <span class="Edit_mustinput">*</span>引用分版:</td>
<td  class="Search_content" id="yyfb">
  <select name="yyfbDm" style="width:160" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')">

var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].text;

依据那一个事物,自个儿用JQEUQX56Y AJAX JSON达成了贰个小作用如下:

复制代码 代码如下:

/**
* @description  将JSON数据转变来HTML数据格式
* @prarm selectId 下拉列表的ID
* @prarm  nodeArray 返回的JSON数组
*
*/
function coverJsonToHtml(selectId,nodeArray){
//get select
   var tempSelect=$j("#" selectId);
   //clear select value
   isClearSelect(selectId,'0');   
var tempOption=null;
for(var i=0;i<nodeArray.length;i ){
//create select Option
tempOption= $j('<option value="' nodeArray[i].dm '">' nodeArray[i].mc '</option> ');
//put Option to select
tempSelect.append(tempOption);
        }
        // 获取退化构件列表
       getCpgjThgl(selectId,'thgjDm');
   }
   /**
   * @description  清空下拉列表的值
   * @prarm selectId 下拉列表的ID
   * @prarm index 起始清空的下标地方
   */
  function isClearSelect(selectId,index){
     var length=document.getElementById(selectId).options.length;
while(length!=index){
      //长度是在转移的,因为必须另行赢得 
          length=document.getElementById(selectId).options.length;
          for(var i=index;i<length;i )
             document.getElementById(selectId).options.remove(i);
         length=length/2;
     }
   }

复制代码 代码如下:

注意:

<TABLE width="100%" border=0 align="left" cellPadding=0 cellSpacing=1>
<tr>
<td class="Search_item_18"> <span class="Edit_mustinput">*</span>援用软件:</td>
<td class="Search_content_82">
<input name="yyrjMc" id="yyrjMc" type="text" class="Search_input" tabindex="3" size="30" >
<input name="yyrjDm" id="yyrjDm" type="hidden" >
<input type="button" class="Search_button_select"
onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="选择...">
</td>
</tr>
<tr>
<td class="Search_item"> <span class="Edit_mustinput">*</span>引用分版:</td>
<td class="Search_content" id="yyfb">
<select name="yyfbDm" style="width:160" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')">
</select>
</td>
</tr>
<tr>
<td class="Search_item">退化构件:</td>
<td class="Search_content" id="thgj">
<select name="thgjDm" style="width:160" id="thgjDm">
<option value="-1" selected>无</option>
</select>
</td>
</tr>
</TABLE>

a:上边的写的是如那样类型的点子obj.options.function()而不写obj.funciton,是因为为了考虑在IE和FF 下的杰出,如obj.add()只好在IE中有效.

6.得到选项option的文书

JS代码:(只取了于SELECT相关的代码)

function addOption(){
//依照id查找对象,
var obj=document.getElementById('mySelect');
//增多三个挑选
obj.add(new Option("文本","值")); //那些只可以在IE中立见成效
obj.options.add(new Option("text","value")); //那个包容IE与firefox
}

一基础掌握:

function removeOne(){
var obj=document.getElementById('mySelect');
//index,要刨除选项的序号,这里取当前相中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}

除去全部<option>标签-----obj.options.length = 0

var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前入选选项的序号
var val = obj.options[index].value;

var e = document.getElementById("selectId");

<html>
<head>
<script language="javascript">
function number(){
var obj = document.getElementById("mySelect");
//obj.options[obj.selectedIndex] = new Option("作者的吃吃","4");//在脚下入选的不得了的值中退换
//obj.options.add(new Option("笔者的吃吃","4"));再增加三个option
//alert(obj.selectedIndex);//展现序号,option本人安装的
//obj.options[obj.selectedIndex].text = "笔者的吃吃";改变值
//obj.remove(obj.selectedIndex);删除作用
}
</script>
</head>
<body>
<select id="mySelect">
<option>笔者的公文包</option>
<option>笔者的书本</option>
<option>笔者的油油</option>
<option>作者的担子</option>
</select>
<input type="button" name="button" value="查看结果" onclick="number();">
</body>
</html>

1:options[ ]数组的质量:

8.删除select

本文由乐百家前段发布,转载请注明来源:javascript对select标签的调整(option选项/select)