js select 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,是因为为了考虑在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相关的代码)


代码如下:

/**
   * @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>

赞 (0)

相关推荐

  • javascript 删除select中的所有option的实例

    javascript  删除select中的所有option的实例 方法一: function DeleteOptions() { var obj = document.getElementsByTagName("select")[0]; var selectOptions = obj.options; var optionLength = selectOptions.length; for(var i=0;i <optionLength;i++) { obj.removeChi

  • AngularJS实现select的ng-options功能示例

    本文实例讲述了AngularJS实现select的ng-options功能.分享给大家供大家参考,具体如下: controller .controller('MainController', function($scope, $http, $ionicModal, $timeout) { var post = {}; $http.get("data/themeData.json") .success(function(response) { $scope.themeData = res

  • js给selected添加options的方法

    本文实例讲述了js给selected添加options的方法.分享给大家供大家参考.具体实现方法如下: <select id="Mmonth"> <option>1</option> </select> <input type="button" onclick="a()" value="添加"/> <script> function a(){ docume

  • js添加select下默认的option的value和text的方法

    <pre name="code" class="java"> jsp 中的下拉框标签: <s:select name="sjx" id="sjx" list="sjxList" listKey="BM" listValue="MC" size="20" cssStyle="width:100%;height:70px;

  • js 操作select与option(示例讲解)

    1.动态创建select 复制代码 代码如下: function createSelect(){ var mySelect = document.createElement_x("select");          mySelect.id = "mySelect";           document.body.appendChild(mySelect);      } 2.添加选项option 复制代码 代码如下: function addOption(){

  • JS更改select内option属性的方法

    本文实例讲述了JS更改select内option属性的方法.分享给大家供大家参考.具体如下: 帮一位友人解决了一个小问题,需求是更改选中选项卡内显示的文本值,新值存放在某个文本框内 初始窗口: <html> <head> <title>原窗口</title> <script> var parentValue=""; //全局变量,用于保存点击详情时select中指定opeion的值 function detail() { va

  • JS获取select-option-text_value的方法

    HTML代码: 复制代码 代码如下: <select id="month" onchange="selectInput(this)">    <option  value="01">January</option>    <option  value="02">February</option>    <option  value="03"&

  • JS & JQuery 动态添加 select option

    今天有朋友问我一个关于在<select>里动态添加option问题,一开始以为是JS那里动态添加,所以用了JS动态添加option的方法,但你那里是用JQuery的,所以才会一直出错,下面记下在JS和JQuery里添加option的区别. JS: var selid = document.getElementById("sltid"); for(var i=0; i<10;i++){ //循环添加多个值 sid.option[i] = new Option(i,i);

  • JS 通过系统时间限定动态添加 select option的实例代码

    JS 通过系统时间限定动态添加 select option的实例代码

    虽然是个简单的效果,还是需要积累一下,记录一下: 源代码如下所示: <select id="myselect1"> <option value="">- -</option> <option value="2015级">2015级</option> <option value="2014级">2014级</option> <option

  • js select option对象小结

    一基础理解: var e = document.getElementById("selectId"); e. options= new Option("文本","值") ; //创建一个option对象,即在<select>标签中创建一个或多个<option value="值">文本</option> //options是个数组,里面可以存放多个<option value="

  • jquery获取select,option所有的value和text的实例

    想想学习jQuery也有几天了,然后今天由于工作需要,我需要把select对应下的option所有的value和 text获取出来,然后拼接,导入到xml文件中,结果搞了一下午,终于搞出来了.下面是对应的代码: <body>中的代码是从别人的网站上复制过来的,我现在需要获取它的value和text,然后拼接成 <朝阳>7</朝阳>的形式 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//

  • 浅谈下拉菜单中的Option对象

    1.创建Option对象 1.1 var optionEle1 = document.createElement('option'); 1.2 var optionEle2 = new Option(text, value, defaultSelected, selected); 2.options属性 2.1 select.options返回select标签下面的Option对象的集合 3.清空下拉菜单 3.1 利用for循环删除,注意数组长度的动态变化 3.2 select.options.

  • JavaScript常用本地对象小结

    一.javascript是面向对象的编程语言 封装:把相关的信息(无论数据或方法)存储在对象中的能力 聚集:把一个对象存储在另一个对象内的能力 继承:由另一个类(或多个类)得来类的属性和方法的能力. 多态:编写能以多种形态运行的函数或方法的能力 二.Array对象 使用单独的变量名来存储一系列的值. 2.1创建数组对象 var aValues = new Array(); var aValues = new Array(25); var aColors = new Array("red"

  • 利用Js的console对象,在控制台打印调式信息测试Js的实现

    一次偶然的机会,打开百度的时候按下了F12,然后就见控制台里面输出了百度的招聘广告,感觉挺帅气的,再然后就有了这篇博文. 既然可以这样在控制台输出信息,那以后再调试Js的时候不就可以省去很多麻烦了嘛!避免不误人子弟,特意使用for(var i in console)查看了下各种浏览器控制台对console的支持, 结果如下: IE 11 控制台 log , info , warn , error , debug , assert , time , timeEnd , group , groupC

  • jQuery动态产生select option下拉列表

    jQuery动态产生select option下拉列表

    但其中没有实现动态产生select option下拉列表. 在jQuery环境之下使用创建jQuery对象来实现动态产生,那是很方便的事情. 在数据库中准备一些数据: 存储过程: 开发ASP.NET MVC,实现程序,少不了model: 现创建一个实体Entity,即是与数据库通讯: 接下来,你可以创建获取数据集的方法,让前端jQuery执行的方法: ok,一切准备就绪. 创建一个select对象: $selectCity = $('<select />').attr({ name: 'cit

  • js select多选列表传值代码

    js select /*移除左边选中的列表项到右边*/ function fMoveSelectedOptionsLeftToRight(oLeft,oRight) { if(!(oLeft&&oRight)) { return; } if(!hasOptions(oLeft)) { return; } if(oLeft.selectedIndex==-1) { oLeft.selectedIndex=0; } for(var i=0;i0) { oSelect.remove(ops.le

  • JS中Object对象的原型概念基础

    JS中Object对象的原型概念基础

    对象概念 在 javascript 中, 一切引用类型均为对象. 如 function Foo () {} 中,Foo本身就是一个对象的引用. 创建对象方式 字面量方式 new 构造函数函数声明 Object.create 字面量对象 javascript语言级别快速创建对象的实例 var obj = {foo: 'foo', bar: 'bar'}; // Object对象字面量 var obj2 = [obj, 'foo', 'bar']; // Array数组字面量 var obj3 =

  • vue.js select下拉框绑定和取值方法

    最近在做mui+vue.js的移动项目,遇到了这个解决了,所以记录一下: 1.绑定select下拉框的代码很简单sendlist就是下拉框的集合,这个可以去看vue.js的文档: 地址:https://cn.vuejs.org/v2/api/ :value绑定的值就是这个下拉框对应的value值 <select id="sendSybol" v-model="searchDto.sendSymbolId"> <option v-for="

随机推荐