Javascript, HTML (select option),
a, basic understanding :

 copying code 

code is as follows:
var=e document. The getElementById (" selectId ");
e. options=new Option (" text ", "value");
//create an option object, namely in <Select> TAB to create one or more <Values of the option value="http://www.jb51.net//web/" > Text </option>
//options is an array, which can hold multiple <Values of the option value="http://www.jb51.net//web/" > Text </option> Such tags

1: options [] array of attributes:
length attribute -- -- -- -- -- -- -- -- -- the length property
selectedIndex property -- -- -- -- -- -- -- -- in the current frame of selected text index, the index value is automatically assigned memory (0,1,2,3...) (corresponding to the first text value, the second text value, the third text values, the fourth text value......)
2: the attributes of a single option (- - - obj. Options [obj. SelecedIndex] is to specify a <option> labels, is a -)
the text property -- -- -- -- -- -- -- -- - returns the text/
the value attribute -- -- -- -- -- - return/specified value, and <The options value=http://www.jb51.net//web/" ... " > Are consistent.
the index attribute -- -- -- -- -- -- -- returns subscripts,
selected properties -- -- -- -- -- -- -- return/specify whether the object is selected. By specifying the true or false, can dynamically change the selected item
defaultSelected properties -- -- -- -- -- return to the object is selected by default. True/false. 3:

option method adds a <Option> Tag -- -- -- -- -- obj. Options. The add (new (" " text, " value ")); <Add >
to delete a <Option> Tag -- -- -- -- -- obj. Options. The remove (obj. SelectedIndex) <Delete >
get an <Option> Text labels -- -- -- -- - obj. Options [obj. SelectedIndex]. Text modify an <Option> The value of the label -- -- -- -- - obj. The options/obj. SelectedIndex=new Option (" " new text, " " the new value <Change >
to delete all <Option> Tag -- -- -- -- -- obj. Options. Length=0
to obtain a <Option> Label value -- -- -- -- - obj. Options [obj. SelectedIndex] value
note:
a: the above is written like this type of method obj. Options. The function () and don't write obj. Funciton, because in order to consider under the FF and IE compatibility, such as the obj. The add () only work in IE.
b: obj. The option in the option does not need to be capitalized, new option in the option needs to be capitalized
2, application

 copying code 

code is as follows:
<Html>
<Head>
<Script language="javascript" >
the function number () {
var obj=document. The getElementById (" mySelect ");
//obj. The options/obj. SelectedIndex=new Option (" I eat ", "4");//at the change in the value of the currently selected.
//obj options. The add (new Option (" I eat ", "4")); Add one more option
//alert (obj. SelectedIndex);//show the serial number, the option set themselves up.
//obj options [obj. SelectedIndex]. Text="I eat"; Change value of
//obj. Remove (obj. SelectedIndex); Delete function
}
</script>
</head>
<Body>
<Select id="mySelect" >
<Option> My bag </option>
<Option> My laptop </option>
<Option> My oil </option>
<Option> My burden </option>
</select>
<Input type="button" name="button" value="http://www.jb51.net//web/to view the results" >
</body>
</html>

1. Created dynamically select

 copy 

code is as follows:
function createSelect () {
var mySelect=document. The createElement method (" select ");
mySelect. Id="mySelect";
document. Body. The appendChild (mySelect);
}

2. The add option option

 copy 

code is as follows:
function addOption () {
//finding objects by id,
var obj=document. The getElementById (" mySelect ");
//add a options
obj. Add (new Option (" text ", "value"));//the only work in IE
obj. Options. The add (new Option (" text ", "value"));//this is compatible with IE and firefox
}

3. The option to delete all options

 copying code 

code is as follows:
function removeAll () {
var obj=document. The getElementById (" mySelect ");
obj. Options. Length=0;
}

4. To delete an option option

 copy 

code is as follows:
function removeOne () {
var obj=document. The getElementById (" mySelect ");
//index, you want to delete the option number, take the serial number of the currently selected options here.
var index=obj selectedIndex;
obj. Options. The remove (index);
}

5. Receive option option value

 copy 

code is as follows:
var obj=document. The getElementById (" mySelect ");
var index=obj. SelectedIndex;//serial number, the serial number of the currently selected options
var val=obj. Options [index] value;

6. Getting the option option text

 copy 

code is as follows:
var obj=document. The getElementById (" mySelect ");
var index=obj. SelectedIndex;//serial number, the serial number of the currently selected options
var val=obj. Options [index]. Text;

7. Modify the option option

 copy 

code is as follows:
var obj=document. The getElementById (" mySelect ");
var index=obj. SelectedIndex;//serial number, the serial number of the currently selected options
var val=obj. Options [index]=new Option (" new text ", "new value");

8. To delete the select

 copying code 

code is as follows:
function removeSelect () {
var mySelect=document. The getElementById (" mySelect ");
mySelect. ParentNode. RemoveChild (mySelect);
}
<! PUBLIC DOCTYPE HTML "-/////DTD/W3C HTML 4.01 useful - 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 "). The options [index] getAttribute (" value ")
the if (val==10)
{
var I=$(" context "). The.childnodes. Length - 1;
var remobj=$(" context "). The.childnodes [I];
remobj. RemoveNode (true)
var sh=document. The createElement method (" select ")
sh. The add (new Option (" pudong new area ", "101"))
sh. The add (new Option (" huangpu district ", "102"))
sh. The add (new Option (" xuhui district ", "103"))
sh. The add (new Option (" putuo district ", "104"))
$(" context "). The appendChild (sh)
}
the if (val==100)
{
var I=$(" context "). The.childnodes. Length - 1;
var remobj=$(" context "). The.childnodes [I];
remobj. RemoveNode (true)
var nj=document. The createElement method (" select ")
nj. Add (new Option (" xuanwu borough ", "201"))
nj. Add (new Option (" Bai Xiaou ", "202"))
nj. Add (new Option (" XiaGuanOu ", "203"))
nj. Add (new Option (" qixia district ", "204"))
$(" context "). The appendChild (nj)

}}
function calc ()
{
var x=$(" context "). The.childnodes. Length - 1;
alert (x)

} function the remove ()
{
var I=$(" context "). The.childnodes. Length - 1;
var remobj=$(" context "). The.childnodes [I];
remobj. RemoveNode (true)
}
</script>
<Body>
<Div id="context" >
<Select id="area" >
</select>
</div>
<Input type=button value="http://www.jb51.net//web/" >
<Input type=button value="http://www.jb51.net//web/" computing nodes >
<Input type=button value="delete http://www.jb51.net//web/&gt;"
</body>
</html>

根据这些东西,自己用JQEURY AJAX+JSON实现了一个小功能如下:
JS代码:(只取了于SELECT相关的代码)

复制代码

代码如下:
/**
* @description 构件联动下拉列表 (用JQUERY 的AJAX配合JSON实现)
* @prarm selectId 下拉列表的ID
* @prarm method 要调用的方法名称
* @prarm temp 此处存放软件ID
* @prarm url 要跳转的地址
*/
function linkAgeJson(selectId,method,temp,url){
$j.ajax({
type: "get",//使用get方法访问后台
dataType: "json",//返回json格式的数据
url: url,//要访问的后台地址
data: "method=" + method+"&temp="+temp,//要发送的数据
success: function(msg){//msg为返回的数据,在这里做数据绑定
var data=http://www.jb51.net//web/msg.lists;
coverJsonToHtml(selectId,data);
}
});
}

* * * @ the description data format converting the JSON data into HTML
* @ prarm selectId drop-down lists the ID of the
* @ prarm nodeArray return JSON array

* *
/function coverJsonToHtml (selectId, nodeArray) {

var//get the select tempSelect=$j + selectId (" # ");
value
//clear the select isClearSelect (selectId, '0');
var tempOption=null;
the for (var I=0; i//create the select Option
tempOption=$j (' <Option value="' + nodeArray [I] dm + '" >' + nodeArray [I]. MC + '</option>');
//put the Option to select
tempSelect. Append (tempOption);

}//gain degradation component list
getCpgjThgl (selectId, 'thgjDm');
}

* * * @ the description empty drop-down list value
* @ prarm selectId drop-down lists the ID of the
* @ prarm index began to empty the index of the location/

* function isClearSelect (selectId, index) {
var length=document. The getElementById (selectId). The options. The length;
the while (length!=index) {
//length is in change, because must retrieve
length=document. The getElementById (selectId). The options. The length;
the for (var I=index; i the document. The getElementById (selectId). The options. The remove (I);
length=length/2;

}}

* * * @ the description to get degradation component list
* @ prarm selectId1 reference software dropdown lists the ID of the
* @ prarm selectId2 degradation components drop-down list ID/

* function getCpgjThgl (selectId1 selectId2) {
var obj1=document. The getElementById (selectId1);//reference software drop-down list.
var obj2=document getElementById (selectId2);//degradation components drop-down list.
var len=obj1 options. Length;
when reference software list length is equal to 1//return, don't do operation
the if (len==1) {
return false;

}//empty drop-down list of values, one of two ways can
//isClearSelect (selectId2, '1');
document. GetElementById (selectId2). Length=1;
the for (var I=0; i var option=obj1. Options [I];
/item/reference software was chosen not to join
the if (I!=obj1. SelectedIndex) {
//clone OPTION is added to the SELECT
obj2. The appendChild (OPTION. CloneNode (true));

}}
}

HTML:

 copy 

code is as follows:
<TABLE width="100%" align="left" border=0 cellPadding=0 cellSpacing=1 >
<Tr>
<Td class="Search_item_18 >" <Span class="Edit_mustinput >" * </span> Reference software: </td>
<Td class="Search_content_82 >"
<YyrjMc input name="" id=" yyrjMc "type=" text "class=" Search_input tabindex "=" 3 "size=" 30 ">
<YyrjDm input name="" id=" yyrjDm "type=" hidden ">
<Input type="button" class="Search_button_select
" onClick="linkAgeTree (' linkage ', 'yyrjtree', 'yyrjMc', 'yyrjDm', 'linkAgeTree', '1');" Value="http://www.jb51.net//web/choose..." >
</td>
</tr>
<Tr>
<Td class="Search_item >" <Span class="Edit_mustinput >" * </span> Reference points: </td>
<Td class="Search_content" id="yyfb >"
<YyfbDm select name="" style=" width: 160 "id=" yyfbDm >"
</select>
</td>
</tr>
<Tr>
<Td class="Search_item >" Degradation of artifacts: </td>
<Td class="Search_content" id="THGJ >"
<ThgjDm select name="" style=" width: 160 "id=" thgjDm >"
<The option value="http://www.jb51.net//web/-1" selected> No </option>
</select>
</td>
</tr>
</table>


This concludes the body part