1

嘿伙计们，首先让我说我是一个 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"); 它然后工作正常，我的选择器有问题吗？

谢谢你的帮助！

4

4 回答 4

1

我刚刚回答了一个类似的问题，基本上你不能在同一页面上有两个具有相同 ID 的元素，这会导致这个确切的问题。您必须使用一个类或更改其中一个 ID。

于 2009-03-10T21:24:50.223 回答
0

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

于 2009-03-08T21:59:23.340 回答
0

好的，像这样的吗？

(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='new-category'”替换为“id='newwcategory'”可以让它工作！？ids中的“-”有什么问题吗？

再次感谢迄今为止的所有帮助！

于 2009-03-09T17:04:32.277 回答
0

我已经确定这是 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 指定为其父级应该可以解决这个问题，但为什么有必要，标签不应该是独立的吗？

于 2009-03-10T14:41:52.610 回答