javascript - Jquery-Jqueryで複数の選択のデータを取得します

Question

これは私の最初の質問に由来します。私はそれを拡大しています。

HTML選択オプション

    <select id="1d" name="camp" multiple="multiple">
    <option data-url0="week_1" value="Week 1">30th July</option>
    <option data-url1="week_2" value="Week 2">6th August</option>
    </select>
    <input type="hidden" name="camp_url0" id="1e">
    <input type="hidden" name="camp_url1" id="1f">

私が苦労しているJqueryスクリプト。

    $("#1d").on("change", function () {
    var url1 = $(this).children(":selected").data("url0");
    var url2 = $(this).children(":selected").data("url1");
    $("#1e").val(url0);
    $("#1f").val(url1);
});

このコードは、1つの重要な問題を除いて、美しく機能します（おそらく、最もクリーンではありませんか？）。マルチセレクターですが、両方のオプションを選択すると、DOMで1つだけoptionがマークされ、1つだけが入力されます。両方が選択されている場合は、両方が必要です。:selecteddata-url{row_id}

それが理にかなっていることを願っています。ご協力いただきありがとうございます。

Answer 1

UPD：

いくつかの追加の「ルーティング」データをhtmlに追加します

<select id="1d" name="camp" size="5" multiple>
    <option data-url="week_1" data-id="1e" value="Week 1">30th July</option>
    <option data-url="week_2" data-id="1f" value="Week 2">6th August</option>
</select>

そしてそれを使用します

$("#1d").on("change", function () {
    $('input[type=hidden]').val('');

    $('option:selected', this).each(function() {
        $('#' + $(this).data('id')).val($(this).data('url'))
    })
})

http://jsfiddle.net/5ctDC/1/

OLD：

それだけ.mapで、データを含む配列を取得できます。

$('option:selected', this).map(function() {
    return $(this).data('url')
})

["week_1", "week_2"]

http://jsfiddle.net/5ctDC/

Answer 2

選択したすべての要素を確認します。

$("#1d").on("change", function () {
    var allurl1 = '', allurl2 = '';
    $(this).children(":selected").each(function(){
        allurl1 += $(this).data("url0");
        allurl2 += $(this).data("url1");
    });
    $("#1e").val(allurl1);
    $("#1f").val(allurl2);
});

作業デモ： http： //jsfiddle.net/maniator/mtAgS/（何が起こるかを視覚的に確認できるように、表示された入力を作成しました）

Answer 3

関係のないメモでは、文字で始まらないidを使用しないでください。