Wie lege ich die standardmäßig ausgewählte Option basierend auf dem Select-Tag fest?

Im Folgenden werde ich einen Artikel darüber veröffentlichen, wie man die standardmäßig ausgewählte Option für das Select-Tag festlegt. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

Es gibt zwei Methoden.

Das erste legt das ausgewählte Element über das Attribut 221f08282418e2996498697df914ce4e fest. Diese Methode kann in dynamischen Sprachen wie verwendet werden als PHP im Hintergrund entsprechend der Notwendigkeit, die Ausgabeergebnisse zu steuern.

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

Der zweite Typ dient der Steuerung des ausgewählten Elements über Front-End-JS:

< 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 zum Abrufen des Texts des ausgewählten Elements im 221f08282418e2996498697df914ce4e-Tag lautet:

var val = document.all.Item.options[document.all.Item.selectedIndex].text
var i=document.getElementById( 'sel' ).options[document.getElementById( 'sel' ).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) Option Option hinzufügen

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

3) Alle Optionen entfernen

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

4) Eine Optionsoption löschen

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

5) Holen Sie sich den Wert der Option

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

6) Holen Sie sich den Text von Option

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

7) Option ändern option

var obj=document.getElementById( 'mySelect' );
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 habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen hilfreich sein die Zukunft.

Verwandte Artikel:

Beim Senden einer Post-Anfrage über Axios wurde festgestellt, dass SpringMVC keine Parameter empfangen konnte (ausführliches Tutorial)

Bestanden Vue implementiert das Hinzufügen einer Axios-Komponente, um das Problem der Nullparameter im Post zu lösen (ausführliches Tutorial)

Verwenden Sie Axios in Vue, um das Problem der Post-Request-Parameter zu lösen (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonWie lege ich die standardmäßig ausgewählte Option basierend auf dem Select-Tag fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!