更改事件触发的选择框

这里太早是我的问题的一个简化版本：更改事件触发的选择框

的HTML：

<select id="mySelect"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
</select>

jQuery的：

$('#mySelect').change(function() { 
    // do stuff 
});

问题是当我将鼠标光标移动到选项上时，do stuff发生在我将光标悬停在其中一个选项上时，在我实际选择新选项之前。我该如何避免这种行为，以便.change()只有在选择完成后选择新选项时才会触发？

编辑1：进一步信息

显然，这代码不会导致行为描述。在实际的代码中，当更多数据通过.get()加载并处理时，选择框正在更新。

编辑2：实际功能更新一个选择框

此功能是一个在我的代码更多的数据加载后，更新的选择框之一。全局变量padm_courses是一个课程对象数组，它具有用于填充课程过滤器选择框的code和name属性。

function loadCourseFilter() { 
    var selected = ''; 
    var sel = $('<select>').attr('id','padmCourseFilter'); 
    $(padm_courses).each(function() { 
     sel.append($("<option>").attr('value',this.code).text(this.name)); 
    }); 
    if($('#padmCourseFilter').length) { 
     selected = $('#padmCourseFilter').val(); 
     $('#padmCourseFilter').replaceWith(sel); 
     if(selected != '') $('#padmCourseFilter option[value="'+escape(selected)+'"]').prop('selected', true); 
    } else { 
     sel.appendTo('#padm_hub_filters'); 
    } 

    $('#padmCourseFilter').change(function() { 
     processMCRsByCourse($('#padmCourseFilter').val()); 
     var tables = $('.sv-datatable').DataTable(); 
     tables.rows('.duplicate').remove().draw(); 
     filterTheBlockFilter(); 
    }); 
}

来源

2017-07-24 AntonChanning

要么使用'$（“＃\\＃mySelect”）'或'id =“mySelect”' – Satpal

是的，对不起，这是我的问题示例代码中的错字，而不是我的实际代码。我编辑它并修复。 – AntonChanning

'当我将鼠标悬停在其中一个选项上时会发生什么情况'您显示的代码中没有任何内容会导致该行为。您能否展示更完整的问题示例 –

好吧，我找到了解决办法。看起来，当触发时，函数loadCourseFilter每次都从头开始重新创建选择框并覆盖旧选择框。当鼠标悬停在其中一个选项上时，会造成奇怪的行为。

功能的修订版只添加新的选项，如果实际上并没有添加不更新过滤器...

function loadCourseFilter() { 
    var sel, output; 
    if($('#padmCourseFilter').length) { 
     var count = 0; 
     sel = $('padmCourseFilter'); 
     output = []; 

     $(padm_courses).each(function() { 
      if($('#padmCourseFilter option[value="'+this.code+'"]').length == 0) { 
       count++; 
       output.push('<option value="'+this.code+'">'+this.name+'</option>'); 
      } 
     }); 
     if(count > 0) { 
      sel.append(output.join('')); 
      sortDropDownListByText('padmCourseFilter'); 
     } 
    } else { 
     sel = $('<select>').attr('id','padmCourseFilter'); 
     $(padm_courses).each(function() { 
      sel.append($("<option>").attr('value',this.code).text(this.name)); 
     }); 
     sel.appendTo('#padm_hub_filters'); 
    } 

    $('#padmCourseFilter').change(function() { 
     processMCRsByCourse($('#padmCourseFilter').val()); 
     var tables = $('.sv-datatable').DataTable(); 
     tables.rows('.duplicate').remove().draw(); 
     filterTheBlockFilter(); 
    }); 
}

来源

2017-07-25 13:50:05 AntonChanning

试着改变你的改变事件

$(document).on('change', '#mySelect', function() { 
    // do stuff 
});

来源

2017-07-24 12:42:45

更改事件触发的选择框

回答

相关问题