0

我的用法很简单，我的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在其上触发事件。

有什么建议么？

4

3 回答 3

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部分：

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

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

提琴手

于 2013-09-30T21:41:51.303 回答
0

只需调用$('#project-dropdown').change(); 更改绑定后。像这样：

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

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

这是它的 JSFiddle。

于 2013-09-30T22:42:39.477 回答
0

我建议您将 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事件的副作用）。

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

于 2018-01-31T18:13:53.483 回答