집 > 기사 > 웹 프론트엔드 > HTML(코드)에서 select의 다양한 사용법 요약

HTML(코드)에서 select의 다양한 사용법 요약

不言원래의: 2018-08-09 14:28:096539검색

이 글은 HTML에서 select의 다양한 사용법에 대한 요약(코드)을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1) 숨기기 및 표시 선택:

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

2) 사용 가능 여부 선택:

       <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 + " ";
}


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

첨부: 일부 선택 스킬

1. 선택 옵션 추가

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

3. options

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

4. 옵션 option

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

5을 삭제합니다. option

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

6. 옵션 option

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

7의 값을 가져옵니다. .Delete select

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

9.Set 선택 optin이 히트되었습니다

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

추천 관련 기사: HTML의 Select 개체에서 Option 개체를 작동하는 방법

교차 구성 요소 배포 안으로 React 상태의 세 가지 방법 소개

위 내용은 HTML(코드)에서 select의 다양한 사용법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

html select 对象

성명：

이전 기사：HTML Select 개체는 Option 개체에서 어떻게 작동합니까?다음 기사：HTML Select 개체는 Option 개체에서 어떻게 작동합니까?