一基础理解:
var e = document.getElementById("selectId");
e. options= new Option("文本","值") ;
//创建一个option对象,即在<select>标签中创建一个或多个<option value="值">文本</option>
//options是个数组,里面可以存放多个<option value="值">文本</option>这样的标签
1:options[ ]数组的属性:
length属性---------长度属性
selectedIndex属性--------当前被选中的框中的文本的索引值,此索引值是内存自动分配的(0,1,2,3.....)对应(第一个文本值,第二个文本值,第三个文本值,第四个文本值..........)
2:单个option的属性(---obj.options[obj.selecedIndex]是指定的某个<option>标签,是一个---)
text属性---------返回/指定 文本
value属性------返回/指定 值,与<options value="...">一致。
index属性-------返回下标,
selected 属性-------返回/指定该对象是否被选中.通过指定 true 或者 false,可以动态的改变选中项
defaultSelected 属性-----返回该对象默认是否被选中。true / false。
3:option的方法
增加一个<option>标签-----obj.options.add(new("文本","值"));<增>
删除一个<option>标签-----obj.options.remove(obj.selectedIndex)<删>
获得一个<option>标签的文本-----obj.options[obj.selectedIndex].text<查>
修改一个<option>标签的值-----obj.options[obj.selectedIndex]=new Option("新文本","新值")<改>
删除所有<option>标签-----obj.options.length = 0
获得一个<option>标签的值-----obj.options[obj.selectedIndex].value
注意:
a:上面的写的是如这样类型的方法obj.options.function()而不写obj.funciton,是因为为了考虑在IE和FF 下的兼容,如obj.add()只能在IE中有效.
b:obj.option中的option不需要大写,new Option中的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>
根据这些东西,自己用JQEURY AJAX+JSON实现了一个小功能如下:
JS代码:(只取了于SELECT相关的代码)
-
-
-
-
-
-
-
- function linkAgeJson(selectId,method,temp,url){
- $j.ajax({
- type: "get",
- dataType: "json",
- url: url,
- data: "method=" + method+"&temp="+temp,
- success: function(msg){
- var data = msg.lists;
- coverJsonToHtml(selectId,data);
- }
- });
- }
-
-
-
-
-
-
- function coverJsonToHtml(selectId,nodeArray){
-
- var tempSelect=$j("#"+selectId);
-
- isClearSelect(selectId,'0');
- var tempOption=null;
- for(var i=0;i<nodeArray.length;i++){
-
- tempOption= $j('<option value="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> ');
-
- tempSelect.append(tempOption);
- }
-
- getCpgjThgl(selectId,'thgjDm');
- }
-
-
-
-
-
- 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;
- }
- }
-
-
-
-
-
-
- function getCpgjThgl(selectId1,selectId2){
- var obj1=document.getElementById(selectId1);
- var obj2=document.getElementById(selectId2);
- var len=obj1.options.length;
-
- if(len==1){
- return false;
- }
-
-
- document.getElementById(selectId2).length=1;
- for(var i=0;i<len; i++){
- var option= obj1.options[i];
-
- if(i!=obj1.selectedIndex){
-
- obj2.appendChild(option.cloneNode(true));
- }
- }
- }
HTML代码:
- <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>