Question

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

<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打开弹出窗口何时选择第一个选项？

修改

我误解了变化事件。正如许多人所提到的，当选择没有改变时，弹出窗口不会触发。也许我会用一个按钮来取代当前的“业务逻辑”。

Answer 1

就像Andy Ray评论的那样 - 这是更改事件的预期行为 - 当选择没有改变时它不会触发。

一个选项是简单地向选择添加一个选项（没有双关语），因此默认情况下不选择“加载新”;

<强> 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> 来加载'加载新...'功能

Answer 2

您还需要在change事件之外添加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/

Answer 3

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

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

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

Answer 4

实际上，使用blur()代替change()的示例可以正常使用。

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

jsfiddle here http://jsfiddle.net/wVRHY/8/

Answer 5

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

解决方案：

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"获得了大部分代码，然后添加了额外的代码以满足您的答案。

jQuery在这个select元素中表现不尽如人意

5 个答案: