I'll jump straight with the markup, then explain what I'm trying to do.

Html select options

    <select id="1d" name="camp">
    <option data-url="week_1" value="Week 1">30th July</option>
    <option data-url="week_2" value="Week 2">6th August</option>
    </select>
    <input type="hidden" name="camp_url" id="1e">

Jquery script I'm struggling with. The script below shows the value of the selected option, of course, but I can't find a way to grab to the data-url info.

    $('#1d').change(function () {
        $('#1e').val($(this).val());
    });

Bottom line, I'm needing the value of input#1e to be the data-url of #1d upon selection.

Thanks for your help.

I'll jump straight with the markup, then explain what I'm trying to do.

Html select options

    <select id="1d" name="camp">
    <option data-url="week_1" value="Week 1">30th July</option>
    <option data-url="week_2" value="Week 2">6th August</option>
    </select>
    <input type="hidden" name="camp_url" id="1e">

Jquery script I'm struggling with. The script below shows the value of the selected option, of course, but I can't find a way to grab to the data-url info.

    $('#1d').change(function () {
        $('#1e').val($(this).val());
    });

Bottom line, I'm needing the value of input#1e to be the data-url of #1d upon selection.

Thanks for your help.

• javascript
• jquery

1 Answer 1

How about that?

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

DEMO: http://jsfiddle/aRzNn/

Also personally I enjoy this solution:

$("#1d").on("change", function () {
    $("#1e").val(function() {
        return $("#1d > :selected").data("url");
    });
});​