Résumé de l'utilisation de la liste déroulante de sélection dans les compétences javascript

Résumé de l'utilisation de la liste déroulante de sélection dans les compétences javascript_javascript

WBOY

Libérer： 2016-05-16 15:21:11

original

1177 Les gens l'ont consulté

Cet article résume les problèmes rencontrés dans les projets de développement
Question 1 : Comment sélectionner la valeur dans l'option de sélection ?
Tout d'abord, une méthode onchange() sera utilisée ; cette méthode est principalement utilisée pour déclencher le moment où le contenu de la boîte de sélection change

Code d'implémentation :

<!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>

Copier après la connexion

Question 2 : Mais en développement, nous sélectionnons généralement le contenu uniquement pour l'affichage, et ce que nous devons vraiment faire est d'interagir avec l'arrière-plan et de transmettre des données .À l'heure actuelle, afin de réduire autant que possible la transmission de données HTTP, nous transmettons généralement l'identifiant, etc., comme indicateur de transmission de données.
En développement, les options sont généralement créées dynamiquement, donc pour le moment, il nous suffit de créer dynamiquement un attribut personnalisé pour vous. Alors, comment obtenir des propriétés personnalisées ?

<!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>

Copier après la connexion

Les résultats sont les suivants :

C'est le problème que j'ai rencontré lors du développement. J'espère que cela pourra inspirer l'apprentissage de tout le monde.