Ausführliche Erläuterung, wie die Standardauswahl des Select-Tags festgelegt wird

Dieser Artikel teilt Ihnen hauptsächlich eine Optionsmethode zum Festlegen der standardmäßig ausgewählten Option des Select-Tags mit. Sie hat einen guten Referenzwert und ich hoffe, dass sie allen helfen kann.

Es gibt zwei Methoden.

Die erste Methode besteht darin, das ausgewählte Element über das Attribut 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 zum Abrufen des Texts des ausgewählten Elements im

label ist:

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 -Tags sind wie folgt:

1) Select dynamisch erstellen

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

2) Add Option Option

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

3) Alle Optionen löschen Option

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

4) Eine Option Option löschen

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

5) Den Wert der Option Option abrufen

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

6) Optionstext abrufen

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

7) Optionsoption ändern

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);
}

Verwandte Empfehlungen:

Wozu dienen Select-Tags in HTML?

JQuery zum Abrufen des Textinhalts mehrerer Select-Tag-Optionen (Beispiel )

js Detaillierte Erklärung, wie man den Wert des Select-Tags erhält

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung, wie die Standardauswahl des Select-Tags festgelegt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：

select 设置 默认

Quelle：php.cn

Vorheriger Artikel：FileReader implementiert eine lokale Vorschau vor dem Hochladen von Bildern Nächster Artikel：Implementierungscode für JavaScript zur Implementierung der todolist-Funktion

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

• Einführung in die neueste Version der PHP Programmer Toolbox v1.0
  1970-01-01 08:00:00
• Ausführliche Erläuterung der benutzerdefinierten Anweisung vue-cli zum Hinzufügen eines Verifizierungsschiebereglers
  1970-01-01 08:00:00
• Ausführliche Erläuterung von Beispielen für den E-Mail-Empfang über IMAP mit PHP
  2023-03-19 18:36:02
• Teilen gängiger Nutzungsszenarien von Redis
  2023-03-21 07:36:01
• Detaillierte Erläuterung der Konvertierung zwischen JS-Zahlen und Strings
  1970-01-01 08:00:00
• Beispielfreigabe für das Hinzufügen von E-Mail-Links zu Dreamweaver-Webseiten
  1970-01-01 08:00:00
• Einführung in den Vue-Filter und seine Verwendung
  1970-01-01 08:00:00
• Teilen von Notizen zu PHP-Grundkenntnissen
  2023-03-20 14:32:01
• Detaillierte Erläuterung der WeChat-Applet-Datei-API
  1970-01-01 08:00:00
• Detaillierte Erläuterung der von JS implementierten Ajax- und Same-Origin-Strategie
  1970-01-01 08:00:00

Aktuelle Ausgaben

SQL Count() erfordert ebenfalls 0 Ich habe nur eine Tabelle und möchte jeden Eintrag eines Tags zählen, der mit 0 beginnt. J...

Aus 2024-04-06 19:48:53

0

1

449

SQL Groupby funktioniert nicht, ich möchte nach Code_Branch gruppieren ->select('a.statusasstatus','b.nameascustomer_name','e.nameasbranch_name','c.nameas...

Aus 2024-04-06 19:24:49

0

2

488

Beim Versuch, die neueste Version eines Pakets von search.maven.org abzurufen, ist ein Fehler aufgetreten „Fehler: Es konnten keine Daten aus dem Maven-Repository abgerufen werden“ beim Abrufen de...

Aus 2024-04-05 12:11:23

0

1

1471

Ändern Sie den matSelect-Stil, wenn Optionen angezeigt werden Wie ändere ich die Eigenschaften von mat-select, wenn die Option aktiviert ist? <mat-se...

Aus 2024-04-05 09:23:19

0

1

1374

Echo innerhalb von Div mit verschachteltem Echo Ich versuche echo<?phprequire'connect.php';$query=mysqli_query($conn,"SELECT*FROM`...

Aus 2024-04-04 11:09:23

0

1

390

verwandte Themen

Mehr>

• So eröffnen Sie ein digitales Währungskonto
• Die Bedeutung von div in CSS
• So überspringen Sie die Verbindung zum Internet nach dem Hochfahren von Windows 11
• myfreemp3
• Verwendung der MySQL-Datediff-Funktion
• Hafen schließen
• Welche Java-Workflow-Engines gibt es?
• Unbekannte Lösung für Fehler 3004

Beliebte Empfehlungen

• Was bedeutet js
• Wie konvertiere ich einen String in ein Array in js?
• So aktualisieren Sie die Seite mit Javascript
• So löschen Sie ein Element im JS-Array
• So verwenden Sie die SQL-Funktion

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

• 
  最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

  1408180
• 
  php入门教程之一周学会PHP

  4240662
• 
  JAVA 初级入门视频教程

  2438278
• 
  小甲鱼零基础入门学习Python视频教程

  500368
• 
  PHP 零基础入门教程

  838764

• 
  最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

  1408180 Lernzeiten
• 
  JAVA 初级入门视频教程

  2438278 Lernzeiten
• 
  小甲鱼零基础入门学习Python视频教程

  500368 Lernzeiten
• 
  Web前端开发极速入门

  214602 Lernzeiten
• 
  零基础精通 PS 视频教程

  865762 Lernzeiten

• 
  【web前端】Node.js快速入门

  5266 Lernzeiten
• 
  国外Web开发全栈课程全集

  4059 Lernzeiten
• 
  Go语言实战之 GraphQL

  3470 Lernzeiten
• 
  550W粉丝大佬手把手从零学JavaScript

  575 Lernzeiten
• 
  python大神Mosh，零基础小白6小时完全入门

  17796 Lernzeiten

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage

• [表单按钮] jQuery企业留言表单联系代码
• [播放器特效] HTML5 MP3音乐盒播放特效
• [菜单导航] HTML5炫酷粒子动画导航菜单特效
• [表单按钮] jQuery可视化表单拖拽编辑代码
• [播放器特效] VUE.JS仿酷狗音乐播放器代码
• [html5特效] 经典html5推箱子小游戏
• [图片特效] jQuery滚动添加或减少图片特效
• [相册特效] CSS3个人相册封面悬停放大特效

• [Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen
• [Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben
• [Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer
• [Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens
• [Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen
• [Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren
• [Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen
• [Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil

• [PNG素材] 可爱的夏天元素矢量素材(EPS+PNG)
• [PNG素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)
• [banner图] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)
• [PNG素材] 金色的毕业帽矢量素材(EPS+PNG)
• [PNG素材] 黑白风格的山脉图标矢量素材(EPS+PNG)
• [PNG素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)
• [banner图] 扁平风格的植树节banner矢量素材(AI+EPS)
• [PNG素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)

• [Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen
• [Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben
• [Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer
• [Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens
• [Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen
• [Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren
• [Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen
• [Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil

Über uns Haftungsausschluss Sitemap

Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！