javascript_javascript スキルの選択ドロップダウンボックスの使用法の概要-jsチュートリアル-php.cn

javascript_javascript スキルの選択ドロップダウンボックスの使用法の概要

WBOY

リリース： 2016-05-16 15:21:11

オリジナル

1177 人が閲覧しました

この記事は、開発プロジェクトで発生する問題をまとめています
質問 1: select のオプションで値を選択するにはどうすればよいですか?
まず、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などを渡します。
開発では通常、オプションは動的に作成されるため、現時点ではカスタム属性を動的に作成するだけで済みます。では、カスタムプロパティを取得するにはどうすればよいでしょうか?

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

ログイン後にコピー

結果は次のとおりです: