Ringkasan penggunaan kotak lungsur pilih dalam kemahiran javascript

Ringkasan penggunaan kotak lungsur pilih dalam kemahiran javascript_javascript

WBOY

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

asal

1122 orang telah melayarinya

Artikel ini meringkaskan masalah yang dihadapi dalam projek pembangunan
Soalan 1: Bagaimana untuk memilih nilai dalam pilihan pilih?
Pertama, kaedah onchange() akan digunakan; kaedah ini digunakan terutamanya untuk mencetuskan masa apabila kandungan kotak pilihan berubah

Kod pelaksanaan:

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

Salin selepas log masuk

Soalan 2: Tetapi dalam pembangunan, kami biasanya memilih kandungan hanya untuk paparan, dan apa yang perlu kami lakukan ialah berinteraksi dengan latar belakang dan menghantar data . Pada masa ini Untuk mengurangkan penghantaran data http sebanyak mungkin, kami biasanya memberikan id dan sebagainya sebagai bendera penghantaran data Bagaimana untuk melakukan ini?
Dalam pembangunan, pilihan biasanya dibuat secara dinamik, jadi pada masa ini, kami hanya perlu mencipta atribut tersuai secara dinamik untuk anda. Jadi bagaimana anda mendapatkan hartanah tersuai?

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

Salin selepas log masuk

Keputusan adalah seperti berikut: