Rumah > Artikel > hujung hadapan web > Ringkasan penggunaan kotak lungsur pilih dalam kemahiran javascript_javascript

Ringkasan penggunaan kotak lungsur pilih dalam kemahiran javascript_javascript

WBOYasal: 2016-05-16 15:21:111122semak imbas

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>

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>

Keputusan adalah seperti berikut:

Inilah masalah yang saya hadapi semasa pembangunan saya harap ia dapat memberi inspirasi kepada pembelajaran semua orang.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Laksanakan kesan pengiklanan terapung di sudut kanan bawah berdasarkan kemahiran javascript_javascriptArtikel seterusnya：Laksanakan kesan pengiklanan terapung di sudut kanan bawah berdasarkan kemahiran javascript_javascript

Artikel berkaitan

Lihat lagi