Ausführliche Erläuterung, wie die standardmäßig ausgewählten Optionen für das <select>-Tag in HTML festgelegt werden-HTML-Tutorial-php.cn

Heim > Artikel > Web-Frontend > Ausführliche Erläuterung, wie die standardmäßig ausgewählten Optionen für das -Tag in HTML festgelegt werden

黄舟Original: 2017-07-28 09:18:473379Durchsuche

Es gibt zwei Methoden.

Die erste Methode besteht darin, das ausgewählte Element über das Attribut 221f08282418e2996498697df914ce4e festzulegen. Diese Methode kann die Ausgabeergebnisse nach Bedarf im Hintergrund in dynamischen Sprachen wie PHP steuern.

< select  id =  "sel" >
< option  value = "1" >1</ option >
< option  value = "2"  selected = "selected" >2</ option >
< option  value = "3" >3</ option >
</ select >

Die zweite Methode besteht darin, das ausgewählte Element über Front-End-JS zu steuern:

< script  type = "text/javascript" >
function change(){
     document.getElementById("sel")[2].selected=true;
}
</ script >
< select  id =  "sel" >
< option  value = "1" >1</ option >
< option  value = "2" >2</ option >
< option  value = "3" >3</ option >
</ select >
< input  type = "button"  value = "修改"  onclick = "change()"  />

Der JS-Code, um den Text des ausgewählten Elements abzurufen im Label 221f08282418e2996498697df914ce4e steht:

var  val = document.all.Item.options[document.all.Item.selectedIndex].text
var  i=document.getElementById( &#39;sel&#39; ).options[document.getElementById( &#39;sel&#39; ).selectedIndex].value;

Einige andere Techniken zum Bedienen des 221f08282418e2996498697df914ce4e-Tags sind wie folgt:

1) Select dynamisch erstellen

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

2) Optionsoption hinzufügen

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

3) Alle Optionsoptionen löschen

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

4) Eine Optionsoption löschen

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

5) Holen Sie sich den Wert der Option

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

6) Holen Sie sich den Text der Option

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

7) Ändern Sie die Option option

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

8) Auswahl löschen

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

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung, wie die standardmäßig ausgewählten Optionen für das