Zusammenfassung der verschiedenen Verwendungen von select in HTML (Code)-HTML-Tutorial-php.cn

Zusammenfassung der verschiedenen Verwendungen von select in HTML (Code)

不言

Freigeben： 2018-08-09 14:28:09

Original

6571 Leute haben es durchsucht

Dieser Artikel stellt Ihnen eine Zusammenfassung (Code) verschiedener Verwendungsmöglichkeiten von select in HTML vor. Ich hoffe, dass er Ihnen als Referenz dienen wird.

1) Auswählen ein- und ausblenden:

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

Nach dem Login kopieren

2) Auswählen ist verfügbar oder nicht verfügbar:

       <select disabled="value">
      document.getElementById("LevelDropList").disabled = "value";      不可用
      document.getElementById("LevelDropList").disabled = "value";     可用

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

Anhang: Einige Select-Tipps

1 Wählen Sie

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

Nach dem Login kopieren

2. Option Option hinzufügen

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

Nach dem Login kopieren

3. Option „Alle Optionen löschen“

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

Nach dem Login kopieren

5 Wert der Option option

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

Nach dem Login kopieren

6. Holen Sie sich den Text der Option option

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

Nach dem Login kopieren

7. Ändern Sie die Option option

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

Nach dem Login kopieren

8. Auswahl löschen

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

Nach dem Login kopieren

9. Auswahloption festlegen

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

Nach dem Login kopieren

Empfohlene verwandte Artikel:

Wie das Select-Objekt von HTML auf Optionsobjekte wirkt

Einführung in drei Methoden des komponentenübergreifenden Verteilungsstatus in React

Das obige ist der detaillierte Inhalt vonZusammenfassung der verschiedenen Verwendungen von select in HTML (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!