javascript - データとHTMLのドロップダウン

Question

そのため、Javascript/Jqueryを使用してHTMLドロップダウンにデータを入力しようとしています。各<option>タグに、searchPurpose、searchTime、startDate、endDateなどのデータを関連付けてほしい。次に2つの質問があります-

1. データタグまたは他の何かを介して、そのデータをどのように関連付ける必要がありますか？
2. ユーザーが特定のオプションをクリックした後、そのデータにアクセスするにはどうすればよいですか？

ありがとう

Answer 1

jQueryを使用していますか？その場合は、組み込みのデータモジュールを使用することをお勧めします。そうでない場合は、データタグを使用します。すべてのデータを1つのデータタグに入れることをお勧めします。すなわち

data="searchPurpose: thing, searchTime: sometime"

そしてそれをこのように分離します：

function data(elem) {
    var data = {};
    var a = elem.getAttribute('data').split(',');
    var i = 0;
    while(i < a.length){
        data[a[i].split(':')[0]] = a[i].split(':')[1];
        i++;
    }
    return data;
}

それで：

data() returns an object literal like this: { searchPurpose: 'thing', searchTime: 'sometime' }

Answer 2

HTML5では、data-*属性は間違いなく進むべき道です。次のものがあるとします。

<select id="ddl">
  <option data-start-date="25-08-2012" value="1">A</option>
  <option data-start-date="25-08-2013" value="1">B</option>
</select>

プレーンJavaScriptを使用してそれらの値にアクセスするには、次のようにします。

selectedOption.getAttribute("data-start-date");

jQueryを使用する場合data()：

$("#ddl").on('change', function () {
  var selectedOption = this.options[this.selectedIndex];
  alert($(selectedOption).data("start-date"));
});

デモ。 デモ（jQuery）。

Answer 3

optionデータをタグに関連付ける方法はたくさんあります。私の頭のてっぺんからいくつかのアイデア：

• 非表示の入力を使用します。<option id="option1">Option 1</option><input type="hidden" id="option1data" value="option1 data here" />
• 属性を使用data-する（すべてのブラウザーでサポートされているわけではありません）：<option id="option1" data-searchPurpose="searchPurpose">Option 1</option>
• jQueryを使用している場合は、その.data（）メソッドを使用できます。$('#option1').data('searchPurpose', 'data...');

データへのアクセスに関しては、ドロップダウンで何をしているかによって異なります。フォームで送信する場合は、onSubmitJavaScriptを使用して、a ） falseを返し、 b）post追加データを使用して、またはget追加データを追加してフォームを送信できます。（非表示の入力ソリューションの場合、このJavaScriptの介入は必要ありません。）

それ以外の場合は、Javascriptを使用してデータにアクセス/変更するのは非常に簡単です。