Question

我的用法很简单，我的页面上有一个简单的select元素。

<select id="project-dropdown">
    <option data-url="/constructions/6">Test 1</option>
    <option data-url="/constructions/7">Test 2</option>
</select>

在Javascript中：

$('#project-dropdown').change(function() {
    var url = $(this).find(':selected').data('url');
    window.location = url;
});

此活动正常，除非我想转到第一个选项。页面开始时选择了第一个元素，因此我无法在其上触发changed事件。

有什么建议吗？

Answer 1

像这样的小黑客对你有用吗？

HTML部分：

<select id="project-dropdown">
    <option data-url="#">Select a value</option>
    <option data-url="/constructions/6">Test 1</option>
    <option data-url="/constructions/7">Test 2</option>
</select>

JS Part：

$('#project-dropdown').change(function() {
     var url = $(this).find(':selected').data('url');

    if(url !== "#")
         window.location = url;
});

JsFiddle

Answer 2

更改绑定后，只需调用 $（'#project-dropdown'）。change（）; 。像这样：

$('#project-dropdown').change(function() {
    var url = $(this).find(':selected').data('url');
    window.location = url;
});

$('#project-dropdown').change();

Here is its JSFiddle

Answer 3

我建议您将HTML更改为：

<select id="project-dropdown" size=2>
    <option data-url="/constructions/6">Test 1</option>
    <option data-url="/constructions/7">Test 2</option>
</select>

通过设置size=2，您可以覆盖默认值1，这会导致列表显示为单行，并且预先选择了初始选项（带有单击它的副作用）不会触发change事件。

将大小设置为2或更多会导致选项显示在size行高的列表中，没有初始选择，因此用户可以选择任何选项，包括第一个。

选择select元素的第一个选项时关闭事件

3 个答案: