Geek asks and answers

JQuery - How to select a specific data type after selecting this option?

I will jump right with the markup, and then explain what I'm trying to do.

HTML selection 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. The script below shows the meaning of the selected option, of course, but I cannot find a way to capture the information data-url.

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

The bottom line, I have to valueof input#1ebe data-urlof #1dafter the selection.

Thank you for your help.

+5
source share
1 answer

How about this?

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

DEMO: http://jsfiddle.net/aRzNn/

I also personally like this solution:

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

More articles:


All Articles