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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

May 16, 2016 pm 03:21 PM

javascript select ドロップダウンボックス

この記事は、開発プロジェクトで発生する問題をまとめています
質問 1: select のオプションで値を選択するにはどうすればよいですか?
まず、onchange() メソッドが使用されます。このメソッドは主に、選択ボックスの内容が変更されるタイミングをトリガーするために使用されます

実装コード:

&lt;!doctype html&gt;
&lt;html&gt;
&lt;head lang="en"&gt;
  &lt;meta charset="UTF-8"&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;select onchange="test(event)"&gt;
    &lt;option&gt;安静&lt;/option&gt;
    &lt;option&gt;晴天&lt;/option&gt;
    &lt;option&gt;七里香&lt;/option&gt;
  &lt;/select&gt;
  &lt;script type="text/javascript"&gt;
    function test (e) {
      var e = event &#63; event : window.event;
      alert(e.target.value);
    }
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

質問 2: しかし、開発では、通常、表示するためだけにコンテンツを選択し、実際に行う必要があるのは、バックグラウンドと対話してデータを送信することです。 . このとき、httpのデータ送信をできるだけ減らすために、通常はデータ送信フラグとしてidなどを渡します。
開発では通常、オプションは動的に作成されるため、現時点ではカスタム属性を動的に作成するだけで済みます。では、カスタムプロパティを取得するにはどうすればよいでしょうか?

&lt;!doctype html&gt;
&lt;html&gt;
&lt;head lang="en"&gt;
  &lt;meta charset="UTF-8"&gt;
&lt;/head&gt;
&lt;body&gt;

  &lt;select onchange="test(event)" id="sel"&gt;&lt;/select&gt;

  &lt;script type="text/javascript"&gt;
    //定义内容的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&lt;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'));
    }
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

結果は次のとおりです: