Zusammenfassung der Verwendung des Auswahl-Dropdown-Felds in den Javascript-Kenntnissen-js-Tutorial-php.cn

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

WBOY

Freigeben： 2016-05-16 15:21:11

Original

1121 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Die Ergebnisse sind wie folgt: