Jquery-如何在选择了特定选项后获取该选项的特定数据类型？

Question

我会直接展示标记，然后解释我想做什么。

HTML选择选项。

    <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脚本，如下所示，它显示了所选选项的值，但我找不到一种方法来获取data-url信息。

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

总的来说，我需要在选择时将input#1e的value作为#1d的data-url。

感谢您的帮助。

- Stephen Callender

Answer 1

这个怎么样？

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

演示: http://jsfiddle.net/aRzNn/

---

对于我个人来说，我喜欢这个解决方案：

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

- VisioN

---

获取选定元素的另一种方法：$('#1e').val($(this.options[this.selectedIndex]).data('url')); 的替代方案。 - Mathachew

@Mathachew 如果你想要绝对混合使用jQuery和vanilla，可以使用 this.options[this.selectedIndex].getAttribute("data-url") 来获取数据属性值。 - VisioN

酷，从未见过将函数作为val()的参数，但这是必要的吗？$("#1e").val($("#1d > :selected").data("url"))不行吗？ - Rodolfo

@Rodolfo，没问题，它可以正常工作。将函数作为val的参数使用并不是必需的。我只是用它来展示jQuery的功能 :) - VisioN

@VisioN - 不知道是否应该发起一个新的问题。我正在扩展从这里开始的那个问题。我正在使用多选，但只有一个在 DOM 中显示为“:selected”。所以，一旦我突出显示第二个选项，第一个选项的信息就会被删除，因为它不再被标记为选中，尽管它仍然被突出显示。 - Stephen Callender