Home >Web Front-end >HTML Tutorial >HTML select option detailed description
HTML select option detailed description
- 高洛峰Original
- 2017-03-13 18:18:172137browse
This article introduces the detailed explanation of HTML select option
javascriptThe detailed explanation of HTML (select option)
1. Basic understanding:
var e = document.getElementById("selectId");
e. options= new Option("text","value");
//Create an option object, that is, create one or more a98f991a265eceb0ca82d509fb3f2da0text4afa15d3069109ac30911f04c56f3338
/ in the 221f08282418e2996498697df914ce4e tag /options is an array, which can store multiple tags like a98f991a265eceb0ca82d509fb3f2da0text4afa15d3069109ac30911f04c56f3338
1: options[ ] arrayAttribute:
length attribute---------Length attribute
selectedIndex attribute--------The text in the currently selected box Index value, this index value is automatically allocated by the memory (0,1,2,3...) corresponding to (the first text value, the second text value, the third text value, the fourth text value ...........)
2: Attributes of a single option (---obj.options[obj.selecedIndex] is a specified 5a07473c87748fb1bf73f23d45547ab8 tag, which is a-- -)
text attribute---------return/specify text
value attribute------return/specify value, same as 76379f8352ec422eb1994b6f5d881034Consistent.
index attribute-------returns the subscript,
selected attribute-------returns/specifies whether the object is selected. By specifying true or false, you can Dynamically change the selected item
defaultSelected attribute-----Returns whether the object is selected by default. true/false.
3:Option method
Add an5a07473c87748fb1bf73f23d45547ab8 tag-----obj.options.add(new("text","value"));ba61e18a2ef20b57f8998b31d6055e29
Delete an 5a07473c87748fb1bf73f23d45547ab8 tag-----obj.options.remove(obj.selectedIndex)fa98b015e2b5de733c0cfa86cc26ced8
Get the text of an 5a07473c87748fb1bf73f23d45547ab8 tag -----obj.options[obj.selectedIndex].textefd15cfe0cd7d72f74962f8046262560
Modify the value of an 5a07473c87748fb1bf73f23d45547ab8 tag -----obj.options[obj.selectedIndex]=new Option ("new text","new value")fe36afa21249a84b6d2f536c8f994469
Delete all 5a07473c87748fb1bf73f23d45547ab8 tags-----obj.options.length = 0
Get a< ;option>The value of the label-----obj.options[obj.selectedIndex].value
Note:
a:The above is written as a method of this type obj.options .function() is not written as obj.funciton because it is for compatibility under IE and FF. For example, obj.add() is only valid in IE.
b: option in obj.option No capitalization is required, the Option in new Option needs to be capitalized
2. Application
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
1a24b17f85e15c83fc29b7760e40bfcb
function number(){
var obj = document.getElementById("mySelect");
//obj.options[obj.selectedIndex] = new Option("My Eat Eat","4" );//Change the value of the currently selected one
//obj.options.add(new Option("My Eat","4"));Add another option
//alert (obj.selectedIndex);//Display the serial number, the option is set by itself
//obj.options[obj.selectedIndex].text = "My food";Change the value
//obj.remove(obj .selectedIndex);Delete function
}
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
c2918509ec73c25471fc547715e887cb
< ;option>My bag4afa15d3069109ac30911f04c56f3338
5a07473c87748fb1bf73f23d45547ab8My notebook4afa15d3069109ac30911f04c56f3338
5a07473c87748fb1bf73f23d45547ab8My oil4afa15d3069109ac30911f04c56f3338
5a07473c87748fb1bf73f23d45547ab8 My burden4afa15d3069109ac30911f04c56f3338
18bb6ffaf0152bbe49cd8a3620346341
d9022e26fad7aaa7b2c06acf96ebe856
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
1. Dynamically create select
function createSelect(){
var mySelect = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}
2 .Add option option
function addOption(){
//Find the object based on id,
var obj=document.getElementById('mySelect');
/ /Add an option
obj.add(new Option("text","value")); //This is only valid in IE
obj.options.add(new Option("text"," value")); //This is compatible with IE and firefox
}
3. Delete all options option
function removeAll(){
var obj=document.getElementById('mySelect');
obj.options.length=0;
}
4. Delete an option option
function removeOne(){
var obj=document.getElementById('mySelect');
//index, the serial number of the option to be deleted, take here The serial number of the currently selected option
var index=obj.selectedIndex;
obj.options.remove(index);
}
5. Get the value of option
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //Serial number, take the serial number of the currently selected option
var val = obj.options [index].value;
6. Get the text of option option
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //Serial number, take the serial number of the currently selected option
var val = obj.options[index].text;
7. Modify the option option
var obj=document. getElementById('mySelect');
var index=obj.selectedIndex; //Serial number, take the serial number of the currently selected option
var val = obj.options[index]=new Option(" New text","new value");
8. Delete 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>
<p id="context">
<select id="area" on
change="choice()">
</select>
</p>
<input type=button value="显示" onclick="show()">
<input type=button value="计算结点" onclick="calc()">
<input type=button value="删除" onclick="remove()">
</body>
</html>
Based on these things, I used JQEURY AJAX+JSON to implement a small function as follows:
JS code: (only the code related to SELECT is taken)
/**
* @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 = msg.lists;
coverJsonToHtml(selectId,data);
}
});
}
/**
* @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;
}
}
/**
* @description 获取退化构件列表
* @prarm selectId1 引用软件下拉列表的ID
* @prarm selectId2 退化构件下拉列表的ID
*/
function getCpgjThgl(selectId1,selectId2){
var obj1=document.getElementById(selectId1);//引用软件下拉列表
var obj2=document.getElementById(selectId2);//退化构件下拉列表
var len=obj1.options.length;
//当引用软件列表长度等于1时返回，不做操作
if(len==1){
return false;
}
//清空下拉列表的值，两种方式都可以
// isClearSelect(selectId2,'1');
document.getElementById(selectId2).length=1;
for(var i=0;i<len; i++){
var option= obj1.options[i];
//引用软件被选中项不加入
if(i!=obj1.selectedIndex){
//克隆OPTION并添加到SELECT中
obj2.appendChild(option.cloneNode(true));
}
}
}
##HTML code:
<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>
The above is the detailed content of HTML select option detailed description. For more information, please follow other related articles on the PHP Chinese website!