Maison > Article > interface Web > Résumé de l'utilisation de la liste déroulante de sélection dans les compétences javascript_javascript

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

WBOYoriginal: 2016-05-16 15:21:111121parcourir

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>

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>

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.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Implémenter un effet de publicité flottante dans le coin inférieur droit en fonction des compétences javascript_javascriptArticle suivant：Implémenter un effet de publicité flottante dans le coin inférieur droit en fonction des compétences javascript_javascript

Articles Liés

Voir plus