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 > Web-Frontend > HTML-Tutorial > Hauptteil

Ausführliche Erläuterung, wie die standardmäßig ausgewählten Optionen für das 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 >

Nach dem Login kopieren

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()"  />

Nach dem Login kopieren

Der JS-Code, um den Text des ausgewählten Elements abzurufen im Label -Tags sind wie folgt:

1) Select dynamisch erstellen

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

Nach dem Login kopieren

2) Optionsoption hinzufügen

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

Nach dem Login kopieren

3) Alle Optionsoptionen löschen

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

Nach dem Login kopieren

4) Eine Optionsoption löschen

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

Nach dem Login kopieren

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;

Nach dem Login kopieren

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;

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]= new  Option( "新文本" , "新值" );

Nach dem Login kopieren

8) Auswahl löschen

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

Nach dem Login kopieren

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