本文摘自PHP中文网,作者不言,侵删。
这篇文章给大家介绍的内容是关于html中select的各种用法总结(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。1)select的隐藏和显示:
1 | $("selectList").style.display=$("selectList").style.display=="block"?"none":"block";
|
2)select 可用不可用:
1 2 3 | < select disabled = "value" >
document.getElementById("LevelDropList").disabled = "value"; 不可用
document.getElementById("LevelDropList").disabled = "value"; 可用
|
1 2 3 4 5 6 7 8 9 10 11 | < html >
< head >
< SCRIPT LANGUAGE = "JavaScript" >
< !--
//oSelect 列表的底部添加了一个新选项
function onload(){
var oOption = document.createElement("OPTION");
oOption.text="Ferrari";
oOption.value="4";
oSelect.add(oOption);
}
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | function fnChange(){
oData.value+=oCars.options[oCars.selectedIndex].text + " ";
}
//-->
< / SCRIPT >
< / head >
< 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 >
< P >
< !--2 select 元素创建了多项选择列表框,方法是设置了 SIZE 和 MULTIPLE 标签属性。要获得多项选择列表框的选中选项,则须遍历 options 集合并检查 SELECTED 是否被设为 true。-->
< SELECT ID = "oSelect" NAME = "Cars" SIZE = "3" MULTIPLE>
< OPTION VALUE = "1" SELECTED>BMW
< OPTION VALUE = "2" >Porsche
< OPTION VALUE = "3" SELECTED>Mercedes
< / SELECT >
< P >
< !--3 以下演示Option的用法-->
< SELECT ID = "oCars" SIZE = "1" onchange = "fnChange()" >
< OPTION VALUE = "1" >宝马
< OPTION VALUE = "2" >保时捷
< OPTION VALUE = "3" SELECTED>大奔
< / SELECT >
< P >
< TEXTAREA ID = "oData" ></ TEXTAREA >
< / body >
</ html >
|
附:一些Select的技巧
1.动态创建select
1 2 3 4 5 | function createSelect(){
var mySelect = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}
|
2.添加选项option
1 2 3 | function addOption(){
//根据id查找对象,var obj=document.getElementById('mySelect');
//添加一个选项obj.add(new Option("文本","值"));}
|
3.删除所有选项option
1 2 3 4 | function removeAll(){
var obj=document.getElementById('mySelect');
obj.options.length=0;
}
|
4.删除一个选项option
1 2 3 4 5 6 | function removeOne(){
var obj=document.getElementById('mySelect');
//index,要删除选项的序号,这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}
|
5.获得选项option的值
1 2 3 | var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].value;
|
6.获得选项option的文本
1 2 3 | var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].text;
|
7.修改选项option
1 2 3 | var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");
|
8.删除select
1 2 3 4 | function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}
|
9.设置select optin被中
1 2 3 4 5 6 7 8 9 10 11 12 | 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 iframe标签怎么使用?Html iframe标签的使用实例介绍
Html article标签有什么用?Html article标签的使用方法介绍
asp和Html的区别有哪些
Html打折计算价格的实现原理与脚本代码
Html中hr怎么设置粗细
Html p标签是单标签吗?Html p标签的使用方法介绍(内附实例)
Html如何给背景加链接
Html table属性你知道多少,进来了解一下?
某些Html字符打不出来怎么办
Html中的注释怎么写?Html中的注释符号又是什么?(附实例)
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html中select的各种用法总结(代码)