Question

This originates from my original question. I’m expanding on it.

Html select options

    <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 script I’m struggling with.

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

This code works beautifully (maybe not the cleanest?), except for one important issue. Even though it is a multiple selector, whenever both options are selected, only one option is marked as :selected in DOM, meaning only one data-url{row_id} is being inputted. I need both, if both are selected.

I hope that makes sense. Thanks for your help.

Answer 1

UPD:

Add some additional “routing” data to the 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>

and use it

$("#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:

Just .map it and you will get an array with the data.

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

["week_1", "week_2"]

http://jsfiddle.net/5ctDC/