Heim > Artikel > Web-Frontend > Zusammenfassung der Verwendung des Auswahl-Dropdown-Felds in den Javascript-Kenntnissen

Zusammenfassung der Verwendung des Auswahl-Dropdown-Felds in den Javascript-Kenntnissen

WBOYOriginal: 2016-05-16 15:21:111122Durchsuche

Dieser Artikel fasst die Probleme zusammen, die bei Entwicklungsprojekten auftreten
Frage 1: Wie wähle ich den Wert in der Option „Auswählen“ aus?
Zunächst wird eine Methode onchange() verwendet; diese Methode wird hauptsächlich verwendet, um den Zeitpunkt auszulösen, an dem sich der Inhalt des Auswahlfelds ändert

Implementierungscode:

<!doctype html>
<html>
<head lang="en">
  <meta charset="UTF-8">
</head>
<body>
  <select onchange="test(event)">
    <option>安静</option>
    <option>晴天</option>
    <option>七里香</option>
  </select>
  <script type="text/javascript">
    function test (e) {
      var e = event &#63; event : window.event;
      alert(e.target.value);
    }
  </script>
</body>
</html>

Frage 2: Aber in der Entwicklung wählen wir den Inhalt normalerweise nur zur Anzeige aus, und was wir wirklich tun müssen, ist, mit dem Hintergrund zu interagieren und Daten zu übertragen Um die HTTP-Datenübertragung so weit wie möglich zu reduzieren, übergeben wir normalerweise die ID usw. als Datenübertragungsflag.
In der Entwicklung werden Optionen im Allgemeinen dynamisch erstellt, daher müssen wir zu diesem Zeitpunkt nur dynamisch ein benutzerdefiniertes Attribut für Sie erstellen. Wie erhält man also benutzerdefinierte Eigenschaften?

<!doctype html>
<html>
<head lang="en">
  <meta charset="UTF-8">
</head>
<body>

  <select onchange="test(event)" id="sel"></select>

  <script type="text/javascript">
    //定义内容的json数据，一般从后台获取
    var data = [
      {
        name: '晴天',
        id: '1'
      },
      {
        name: '安静',
        id: '2'
      },
      {
        name: '七里香',
        id: '3'
      }
    ];

    createOption('sel',data);
    //创建option
    function createOption(parentId, data){
      var parentId = document.getElementById(parentId);
      for(var i=0; i<data.length; i++){
        var opt = document.createElement('option');
        //设置option的值
        opt.innerHTML = data[i].name;
        //定义option的自定义值
        opt.setAttribute('dataid', data[i].id);
        parentId.appendChild(opt);
      }
    }
    //选取自定义属性的方法
    function test (e) {
      var e = event &#63; event : window.event;
      var target = e.target;
      var index = target.selectedIndex;
      alert("我的id="+target[index].getAttribute('dataid'));
    }
  </script>
</body>
</html>

Die Ergebnisse sind wie folgt:

Das ist das Problem, auf das ich während der Entwicklung gestoßen bin. Ich hoffe, es kann alle zum Lernen anregen.

Stellungnahme：

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

Vorheriger Artikel：Implementieren Sie den schwebenden Werbeeffekt in der unteren rechten Ecke basierend auf den Fähigkeiten von javascript_javascriptNächster Artikel：Implementieren Sie den schwebenden Werbeeffekt in der unteren rechten Ecke basierend auf den Fähigkeiten von javascript_javascript

In Verbindung stehende Artikel

Mehr sehen