`

HTML select option 详解

阅读更多

HTML select option 详解

[本文转自]http://www.cnblogs.com/dcba1112/archive/2011/05/26/2057551.html

 

HTMLXHTML中的区别

 

In HTML the <option> tag has no end tag.
HTML
<option>标签不需要关闭

In XHTML the <option> tag must be properly closed.
XHTML<option>标签必须合理关闭

 

javascriptHTMLselect option)详解

一、基础理解:

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,是因为为了考虑在IEFF 下的兼容,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>

 

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" 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>
 



根据这些东西,自己用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 = 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代码:

<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>

 

 

 

 

 

分享到:
评论

相关推荐

    javascript_select_option_操作详解.txt

    ### JavaScript Select Option 操作详解 #### 一、检测是否有选中项 在处理表单时,经常需要检测用户是否已选择了某个 `&lt;select&gt;` 元素中的 `&lt;option&gt;` 项。以下是一个简单的示例来实现这一功能: ```javascript ...

    js 操作select和option

    ### JavaScript 操作 Select 和 Option 的方法详解 在网页开发中,`&lt;select&gt;` 元素是一种常见的表单控件,用于收集用户输入的选择项。它通常包含多个 `&lt;option&gt;` 子元素供用户选择。通过 JavaScript,我们可以实现...

    select语句详解

    ### SELECT语句详解 在数据库查询操作中,`SELECT`语句是最常用且最核心的命令之一,它用于从数据库中检索数据。本篇将详细解析`SELECT`语句的结构与功能,帮助读者深入理解并掌握其用法,成为数据库查询的高手。 ...

    select命令用法详解

    ### Select 命令详解 在Shell编程中,`select`命令是一种特殊的循环结构,它主要用于构建菜单式交互界面,方便用户通过简单的数字或字母选择来执行不同的命令或操作。与传统的`for`循环不同,`select`命令更加注重...

    WDA Tutorial 02_ Using Select Options in a WDA Application

    此教程适用于希望深入了解SAP NetWeaver 2004s WebDynpro for ABAP(WDA)环境中Select Option功能使用的初学者。 ### 一、基础知识概述 #### 1.1 WebDynpro for ABAP简介 WebDynpro for ABAP是SAP为开发基于ABAP...

    Vue + Element-ui的下拉框el-select获取额外参数详解

    直接上代码吧~ 用户类型 width=180&gt; placeholder=请选择 change=changeRole($event,scope)&gt; &lt;el-option v-for=item in roles :key=item.value :l

    Angular2中select用法之设置默认值与事件详解

    本文主要给大家介绍了Angular2中select用法之设置默认值与事件的相关内容,分享出来供大家参考学习,...&lt;option xss=removed&gt;请选择&lt;/option&gt;使用的是value(这是HTML原生的属性) &lt;option ngFor=let value]='item'&gt;

    jQuery中的select操作详解

    select的html标签如下: &lt;select class=xxx id=yyy&gt;&lt;option&gt;&lt;/option&gt;...&lt;option&gt;&lt;/option&gt;&lt;/select&gt; 1.设置value为“lll”的option选中 $('#yyy').val(lll);或者$('.xxx').val(lll) 可用于让select...

    htmlSelect.txt

    ### 关于 `&lt;html:select&gt;`、`&lt;html:option&gt;`、`&lt;html:options&gt;` 和 `&lt;html:optionsCollection&gt;` 的详细解析 #### `&lt;html:select&gt;` 标签 `&lt;html:select&gt;` 是一个用于生成 HTML `&lt;select&gt;` 元素的标签。在 Struts 1.x...

    jquery select2组件

    **jQuery Select2组件详解** `jQuery Select2`是一款强大的、高度可定制的下拉选择框插件,它在原生HTML `&lt;select&gt;` 元素的基础上提供了丰富的功能和优秀的用户体验。这款组件广泛应用于网页开发中,使得传统的单选...

    Select2的插件下载.zip

    **Select2插件详解** Select2是一款非常流行的JavaScript库,基于jQuery设计,它的主要目标是为HTML中的`&lt;select&gt;`元素提供一个强大的替代方案。在网页开发中,原生的`&lt;select&gt;`元素功能有限,样式单一,而Select2...

    js之Select用法

    在JavaScript中,`&lt;select&gt;`元素是HTML中的一个标准组件,用于创建下拉菜单。它允许用户从一组预定义的选项中进行选择。...希望这个详解能帮助你理解和运用`select`元素,让网页开发变得更加高效和有趣。

    select下拉框插件jquery.editable-select详解

    html代码 数据来源 &lt;select class=source&gt; &lt;option value=0&gt;人工导入&lt;/option&gt; &lt;option value=1&gt;数据服务平台&lt;/option&gt; &lt;/select&gt; js代码 $('#noMean').editableSelect({ filter:false, ...

    bootstrap-select下拉框

    Bootstrap Select是一款基于Bootstrap框架的下拉框插件,它扩展了HTML `&lt;select&gt;`元素,提供了丰富的功能和定制选项,使得下拉菜单在视觉效果和用户体验上都有显著提升。这款插件广泛应用于网页开发中,特别是在需要...

    jQuery Select(单选) 模拟插件 V1.3.6

    **jQuery Select(单选) 模拟插件 V1.3.6 知识点详解** 在网页开发中,我们经常需要使用到选择器来获取用户的选择,原生的HTML `&lt;select&gt;` 元素虽然简单易用,但在样式定制和交互效果上往往显得力不从心。为了改善这...

    AngularJS入门教程之Select(选择框)详解

    需要注意的是,ng-repeat创建的select元素中,每一个option元素都是独立的,其中的`value`属性需要手动绑定。 然而,ng-options在创建具有复杂数据绑定关系的下拉列表时,具有明显优势。ng-options在使用对象时,...

    select-disabled-传值

    在Web开发中,`select`元素是一种常见的HTML控件,用于创建下拉列表供用户选择。然而,在某些情况下,我们可能希望`select`元素变为只读状态,即用户无法更改其内容,但仍需将当前选中的值传递给服务器端进行处理。...

    HTML 中 select 的学习

    ### `select`元素详解 `&lt;select&gt;`标签用于创建一个下拉列表,用户可以从其中选择一个或多个值。其基本语法如下: ```html &lt;select name="name_attribute"&gt; &lt;option value="value_attribute"&gt;Text to display&lt;/...

    jquery下拉菜单插件SelectMenu

    **jQuery下拉菜单插件SelectMenu详解** 在网页开发中,下拉菜单是常见的交互元素,用于提供多种选择项供用户进行操作。`SelectMenu.js` 是一款基于 jQuery 的高效下拉菜单插件,它提供了丰富的特性,使开发者能够...

Global site tag (gtag.js) - Google Analytics