javascript中select下拉方塊的用法總結_javascript技巧-js教程-PHP中文網

javascript中select下拉方塊的用法總結_javascript技巧

WBOY

發布： 2016-05-16 15:21:11

原創

1154 人瀏覽過

本文針對開發專案中遇到的問題，進行了總結
問題1：如何選擇select的option裡面的值？
首先會用到一個方法 onchange（）；這個方法主要用於觸發，選擇框內容改變時間

實作程式碼：

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

登入後複製

問題2：可是在開發中，我們一般選擇了內容只是為了顯示，而真正要做的是和後台進行交互數據傳輸，這時候，我們為了盡量減少http資料傳輸，所以一般會傳id 等作為資料傳輸標誌，如何做？
開發中，option通常是動態建立的，那麼這時候，我們只需要給你動態建立一個自訂屬性。那麼如何取得自訂屬性呢？

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

登入後複製

結果圖如下：

這就是我在開發中遇到的問題，希望可以對大家的學習有所啟發。