Summary of various usages of select in html (code)

不言
Release: 2018-08-09 14:28:09
Original
6589 people have browsed it

This article introduces to you a summary (code) of various usages of select in HTML. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1) Hide and show select:

     $("selectList").style.display=$("selectList").style.display=="block"?"none":"block";
Copy after login

2) Select is available or unavailable:

       <select disabled="value">
      document.getElementById("LevelDropList").disabled = "value";      不可用
      document.getElementById("LevelDropList").disabled = "value";     可用
Copy after login
<html>
< head>
< SCRIPT LANGUAGE="JavaScript">
< !--
//oSelect 列表的底部添加了一个新选项
function onload(){
var oOption = document.createElement("OPTION");
oOption.text="Ferrari";
oOption.value="4";
oSelect.add(oOption);
}
Copy after login
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> <!--此处设置了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>
Copy after login

Attachment: Some Select skills

1. Dynamic Create select

function createSelect(){
var mySelect = document.createElement("select");
mySelect.id = "mySelect"; 
document.body.appendChild(mySelect);
}
Copy after login

2. Add option option

function addOption(){
//根据id查找对象,var obj=document.getElementById(&#39;mySelect&#39;);
//添加一个选项obj.add(new Option("文本","值"));}
Copy after login

3. Delete all options option

function removeAll(){
var obj=document.getElementById(&#39;mySelect&#39;);
obj.options.length=0;
}
Copy after login

4. Delete one option option

function removeOne(){
var obj=document.getElementById(&#39;mySelect&#39;);
//index,要删除选项的序号,这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index); 
}
Copy after login

5. Get The value of option option

var obj=document.getElementById(&#39;mySelect&#39;);
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].value;
Copy after login

6. Get the text of option option

var obj=document.getElementById(&#39;mySelect&#39;);
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].text;
Copy after login

7. Modify option option

var obj=document.getElementById(&#39;mySelect&#39;);
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");
Copy after login

8. Delete select

function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}
Copy after login

9. Set 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;
Copy after login

Recommended related articles:

How the HTML Select object operates the Option object

Introduction to three methods of distributing status across components in React

The above is the detailed content of Summary of various usages of select in html (code). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template