Question

嘿伙计们，首先让我说我是一个jQuery菜鸟！我想制作一个自动填充html选择元素的简单插件，它在第一个元素上运行正常，但是当我再次调用它来填充第二个元素时，它什么都不添加。以下是我在ajax选项卡中的调用，其中＃product和#new-category是选择元素：

$(function(){

    $("#product").popSelect("products");

    $("#new-category").popSelect("categories");

});

HTML：

><select id="product" name="product">
>     < option value="">Select Product</option>                 
></select >     
><select id="new-category" name="new-category">
>      < option value="">Select Category< /option>                  
></select >

这是插件：

(function(jQuery){
jQuery.fn.popSelect = function(table) {

    return jQuery(this).each(function(){            

        var obj = jQuery(this); 

        if(this.nodeName.toLowerCase() == 'select'){
            jQuery.getJSON("../app/modules/ajax/json.php", { table:table },
                function(data){                 
                    var options = '';           
                    jQuery.each(data, function(i,item){                                        
                        options += '<option value="' + item.id + '">' + item.title + '</option>';                   
                    });                 
                    obj.append(options);                
                });     
        };
    });
};
})(jQuery);

奇怪的是，如果我改变了第二个函数调用 $("#new-category").popSelect("categories");来 $("[id^='new-category']").popSelect("categories"); 然后它工作正常，我的选择器有问题吗？

感谢您的帮助！

Answer 1

我刚回答了一个类似的问题，基本上是you can't have two elements with the same ID on the same page，它引起了这个问题。您必须使用课程或更改其中一个ID。

Answer 2

我没有直接答案，但看起来你会在基本上同时有两个活跃的ajax调用，这可能会导致一些奇怪的感觉？

Answer 3

好的，这样的事情？

(function($){
jQuery.fn.popSelect = function(table) {

    return $(this).each(function(){         

        var obj = $(this);  

        if(this.nodeName.toLowerCase() == 'select'){
            obj.queue("fx", function(){$.getJSON("../app/modules/ajax/json.php", { table:table },
                function(data){                 
                    var options = '';           
                    $.each(data, function(i,item){                                         
                        options += '<option value="' + item.id + '">' + item.title + '</option>';                   
                    });             
                    obj.append(options);                
                }); }); 
        };
    });};})(jQuery);

我没有错误，但它仍然只填充IE中的第一个选择，相同的响应。令人费解，甚至在调用之间添加“等待”功能，它什么也没做。有id标签==名称标签好吗？我注意到的一些事情，用“id ='newwcategory'”替换“id ='new-category'”使它工作！？ “ids”中的“ - ”是错误的吗？

再次感谢所有帮助！

Answer 4

我已经确定这是jQuery UI标签的问题，因为插件在没有它们的情况下完美运行！如果先前选择的选项卡具有相同的元素，则不会填充当前所选选项卡中的元素 ID。例如：

第一个标签：

<select id="new_category" name="new_category">

     <option value="">Select Category</option>
</select>

第二个标签：

<select id="product" name="product">
      <option value="">Select Product</option>
</select>

<select id="new_category" name="new_category">
      <option value="">Select Category</option>
</select>

第三个标签：

<select id="product" name="product">
      <option value="">Select Product</option>
</select>

从选项卡1转到选项卡2 - 将填充产品但不会填充 new_category 从标签2转到标签3 - 产品将不会填充......

即。如果一个id等于前一个标签的元素存在于当前选项卡，它将不会填充和（可能？）上一个选项卡元素虽然我不能看到它，因为它没有加载。我有尝试摆弄缓存，但没有帮助，指定表单ID 因为它的父母应该解决这个问题，但为什么有必要，标签不应该是独立的吗？

第一个jQuery插件问题

4 个答案: