0

我有这段代码，当下拉列表中的第一项被选中时，它会打开一个弹出窗口。

<select id="selectItem">
    <option value="newItem">Load new item...</option>
    <option value="ddsds">first item  </option>
</select>

$(document).ready(function(){  
    $("#selectItem").change(function(){
        if($(this).prop("selectedIndex") == 0){
            window.open('popup.html', '_blank', 'scrollbars=1, height=600, width=500');
        }
    });
 });

jsFiddle

如果我选择的项目与第一个项目不同，则选择第一个项目将打开弹出窗口。

但是，如果选择了第一个项目而之前没有选择任何其他项目，则不会启动弹出窗口。

我不明白发生了什么。选择第一个选项时，我应该如何正确地告诉jQuery以打开弹出窗口？

编辑：

我误解了 change 事件。As many people mentioned, the popup won't fire when the selection isn't changed. 也许我会用一个按钮来代替当前的“业务逻辑”。

4

5 回答 5

2

Like Andy Ray commented - this is expected behavior for the change event - it won't fire when the selection isn't changed.

一种选择是简单地在选择中添加一个选项（没有双关语），以便默认情况下不选择“加载新”；

html

<select id="selectItem">
    <option selected>please pick</option>
    <option value="newItem">Load new item...</option>
    <option value="ddsds">first item  </option>
</select>

js

$("#selectItem").change(function () {
    if (this.value === "newItem") {
        window.open('popup.html', '_blank', 'scrollbars=1, height=600, width=500');
    }
});

http://jsfiddle.net/wVRHY/6/

但是 - 根据您的表单应该做什么，我怀疑您可能会更好地使用<button>“加载新...”功能

于 2012-10-14T22:01:30.780 回答
1

您还需要在更改事件之外添加 window.open 方法，以便在加载页面时运行它。

    $(document).ready(function(){  
    $("#selectItem").change(function(){
            if($(this).prop("selectedIndex") == 0){
                window.open('popup.html', '_blank', 'scrollbars=1, height=600, width=500');
            }
        });
    if($("#selectItem").prop("selectedIndex") == 0){
                window.open('popup.html', '_blank', 'scrollbars=1, height=600, width=500');
            }
 });

http://jsfiddle.net/wVRHY/2/

于 2012-10-14T21:49:26.523 回答
1

页面加载后，您将需要使用该load事件检查选项的状态 - 或者您可以手动trigger更改事件。

http://api.jquery.com/load-event/

http://api.jquery.com/trigger/

于 2012-10-14T21:52:15.700 回答
1

实际上，对于您的示例，使用blur()代替change()会起作用。

$("#selectItem").blur(function(){
        if($(this).prop("selectedIndex") == 0){

jsfiddle在这里http://jsfiddle.net/wVRHY/8/

于 2012-10-14T22:04:59.497 回答
1

信息：显然，当您第一次单击第一项时，它不应该显示弹出窗口，因为否则用户将无法看到所有其他选项。因此，以下代码将允许您单击第一个选项以查看所有选项，然后当您选择第一个项目时，它将按您的需要工作。

解决方案： 

var cc = 0;

$('#selectItem').click(function ()
{
  cc++;

  if (cc == 2) 
  {
    $(this).change();
    cc = 0;
  }
}).change(function (){
  if ($(this).prop("selectedIndex") == 0)
  {
    window.open('popup.html', '_blank', 'scrollbars=1, height=600, width=500');
  }

  cc = -1;
});

信用：我从“Vega's Answer”中获得了大部分代码 ，然后添加了额外的代码以适合您的答案。

于 2012-10-14T22:42:54.297 回答