Question

我使用jquery动态填充下拉列表。它工作正常，但每次执行它都会添加到下拉列表中，并且不会从下拉列表中删除以前的值。

我用来动态填充下拉列表的代码是：

 $(document).ready(function() { 
                $("#diselc").change(function(){ 
                    fillOptions('diselc','diselchild'); 
                    }); 
            }); 
            function fillOptions(parentId,ddId) {
                alert("atleast the call is being made in the fillOptions"+ddId);
                var dd = $('#' + ddId); 
                alert("the value being passed is "+dd);
                var jsonURL = '/docRuleTool/DataRetrival.do?disease_name='+ $('#' + parentId + ' :selected').val(); 
                $.getJSON(jsonURL, function(opts)
                {
                alert("just after calling the servlet stuff ");
                    $('>option', dd).remove(); // Clean old options first. 
                    if (opts) { 
                        $.each(opts, function(key, value) { 
                            dd.append($('<option/>').val(key).text(value)); 
                        }); 
                    } else { 
                        dd.append($('<option/>').text("Please select parent")); 
                    } 
                }); 


            }

Answer 1

用于清除旧选项的jQuery选择器包含语法错误。将$('>option', dd).remove()替换为dd.empty()。

Answer 2

你有什么should work。但是，jQuery docs声明如下：

注意：$（“＆gt; elem”，上下文）选择器将来会被弃用发布。因此不鼓励使用它来代替使用替代方案选择器。

所以我建议使用其他答案中已经显示的empty。另一种方法是获取所有子option元素并将其删除。这几乎与您已有的相同，但使用children方法而不是子选择器：

dd.children("option").remove();

下拉列表正在填充，而不是被修剪

2 个答案: