一、基础理解:
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>
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 操作详解 #### 一、检测是否有选中项 在处理表单时，经常需要检测用户是否已选择了某个 `<select>` 元素中的 `<option>` 项。以下是一个简单的示例来实现这一功能： ```javascript ...
### JavaScript 操作 Select 和 Option 的方法详解 在网页开发中，`<select>` 元素是一种常见的表单控件，用于收集用户输入的选择项。它通常包含多个 `<option>` 子元素供用户选择。通过 JavaScript，我们可以实现...
### JavaScript 多级联动 Select 实现详解 在前端开发中，多级联动 Select 是一个常见的需求，尤其是在处理地区选择、分类导航等场景时。本文将深入解析如何利用原生 JavaScript 实现多级联动 Select，包括其核心...
在JavaScript中，`<select>`元素是HTML中的一个标准组件，用于创建下拉菜单。它允许用户从一组预定义的选项中进行选择。在本文中，我们将深入探讨`select`的用法，包括如何创建、操作和处理`select`元素的各种事件。...
其中，Select（选择框）控件是用户交互中常用的元素之一，它允许用户从一组选项中进行选择。AngularJS通过ng-options指令简化了选择框的创建和数据绑定，使得在视图层与模型层之间同步数据变得容易。 在AngularJS中...
本文将详细介绍如何使用JavaScript删除select元素中的所有option标签，并给出几种不同的实现方法。在Web开发过程中，经常需要动态地对select元素进行操作，例如清除已有选项，以适应不同的应用场景。正确地删除...
**jQuery Select2组件详解** `jQuery Select2`是一款强大的、高度可定制的下拉选择框插件，它在原生HTML `<select>` 元素的基础上提供了丰富的功能和优秀的用户体验。这款组件广泛应用于网页开发中，使得传统的单选...
**Select2插件详解** Select2是一款非常流行的JavaScript库，基于jQuery设计，它的主要目标是为HTML中的`<select>`元素提供一个强大的替代方案。在网页开发中，原生的`<select>`元素功能有限，样式单一，而Select2...
具体包括了如何通过JSP和JavaScript动态控制`select`元素的`disabled`属性，以及如何在表单提交前解除该属性以确保数据能够正确传递给服务器端。这种方法适用于多种应用场景，特别是在需要限制用户交互的同时保持...
本文将详细介绍如何使用JavaScript实现`select`清零，并深入探讨相关的知识点。 ### 一、基本概念 #### 1.1 `<select>`元素 `<select>`是HTML中的一个常用标签，用于创建下拉列表。它允许用户从多个预定义的选项中...
**jQuery Select(单选) 模拟插件 V1.3.6 知识点详解** 在网页开发中，我们经常需要使用到选择器来获取用户的选择，原生的HTML `<select>` 元素虽然简单易用，但在样式定制和交互效果上往往显得力不从心。为了改善这...
### `select`元素详解 `<select>`标签用于创建一个下拉列表，用户可以从其中选择一个或多个值。其基本语法如下： ```html <select name="name_attribute"> <option value="value_attribute">Text to display</...
在`bootstrap-select-1.10.0`这个压缩包中，包含了该插件的源码、CSS样式和JavaScript文件，开发者可以根据需求选择合适的版本进行引用。同时，为了实现特定功能或自定义样式，可以查阅官方文档以获取更多配置选项和...
### JavaScript Options 属性集合操作详解 #### 一、概述 在网页开发中，`<select>` 元素常用于创建下拉列表，而 `<option>` 元素则用于定义下拉列表中的具体选项。通过 JavaScript 操作这些元素，开发者可以实现...
### Js操作Select大全知识点详解 #### 一、概述 JavaScript（简称JS）是网页开发中不可或缺的一部分，尤其在处理用户界面交互方面具有重要作用。本文档将详细介绍如何利用原生JavaScript和jQuery来操作`<select>`...
**jQuery下拉菜单插件SelectMenu详解** 在网页开发中，下拉菜单是常见的交互元素，用于提供多种选择项供用户进行操作。`SelectMenu.js` 是一款基于 jQuery 的高效下拉菜单插件，它提供了丰富的特性，使开发者能够...
**jQuery Select2 美化插件详解** `jQuery Select2` 是一款广泛使用的JavaScript库，专门用于美化和增强HTML `<select>` 元素。它提供了丰富的功能和自定义选项，使得原本简单的下拉选择框变得功能强大且视觉上更具...
**jQuery Select2 3.3.2 自动补全功能详解** `jQuery Select2` 是一个高度可定制的插件，用于将普通的 HTML `<select>` 元素转换为功能丰富的选择器。它提供了搜索、多选、无限滚动等多种功能，其中最常用的特性之...
总结来说，`<select>`标签是HTML中用于创建交互式下拉菜单的关键元素，通过`<option>`标签定义选项，`multiple`属性实现多选，`size`属性控制可见选项数量，而JavaScript可以用来进行更复杂的操作，如添加和检查选项...