html中select的各种用法总结（代码）

1）select的隐藏和显示：

 $( selectList ).style.display=$( selectList ).style.display== block ? none : block 

2）select 可用不可用：

 select disabled= value  document.getElementById( LevelDropList ).disabled = value 不可用 document.getElementById( LevelDropList ).disabled = value 可用

 html  head  SCRIPT LANGUAGE= JavaScript //oSelect 列表的底部添加了一个新选项function onload(){var oOption = document.createElement( OPTION oOption.text= Ferrari oOption.value= 4 oSelect.add(oOption);}

function fnChange(){oData.value+=oCars.options[oCars.selectedIndex].text + 
 body onload= onload() !--手工添加一个Select--  !--1 uses the SELECT element to create a drop-down list box--  SELECT NAME= Cats SIZE= 1  OPTION VALUE= 1 Calico OPTION VALUE= 2 Tortie OPTION VALUE= 3 SELECTED Siamese /SELECT  !--2 select 元素创建了多项选择列表框，方法是设置了 SIZE 和 MULTIPLE 标签属性。要获得多项选择列表框的选中选项，则须遍历 options 集合并检查 SELECTED 是否被设为 true。--  SELECT ID= oSelect NAME= Cars SIZE= 3 MULTIPLE !--此处设置了3和multiple--  OPTION VALUE= 1 SELECTED BMW OPTION VALUE= 2 Porsche OPTION VALUE= 3 SELECTED Mercedes /SELECT  !--3 以下演示Option的用法--  SELECT ID= oCars SIZE= 1 onchange= fnChange()  OPTION VALUE= 1 宝马 OPTION VALUE= 2 保时捷 OPTION VALUE= 3 SELECTED 大奔 /SELECT  TEXTAREA ID= oData /TEXTAREA  /body  /html 

附：一些Select的技巧

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( 文本 , 值 ));}

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);}

9.设置select optin被中

function removeSelect(){// 向办件人员下拉列表动态添加员工for ( var i = 0; i json.length; i++) {var newOption = new Option(json[i].empname, json[i].empid, i);//向办件人员下拉列表添加员工信息objDeal.options.add(newOption);//客户业务员的Id不为空if(empbyDealEmpId!= || empbyDealEmpId!=0){//员工id等于下拉列表中的值,则下拉列表被选中if(empbyDealEmpId==objDeal.options[i].value){//判断此下拉列表被选中objDeal.options[i].selected=true;

相关文章推荐：

HTML的Select对象如何进行Option对象的操作

React中跨组件分发状态的三种方法介绍

以上就是html中select的各种用法总结（代码）的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。