jQuery 一次又一次地调用函数

Question

为了显示 dropdown2（可以是任何其他内容），我使用 dropdown1 onchange="getFilterOption()".

HTML（调用函数getFilterOption）

<select name="filter" data-userid="3" onchange="getFilterOption()">
    <option value="one">One</option>
    <option value="two">Two</option>
</select>";

jQuery（函数 getFilterOption）

function getFilterOption() {
    $("#TargetFilterOption").append('<select id="filter_class1" name="filter1" data-privelesid1="".$priveles_id."" onchange="getFilter1(this.value)"><option value="">Filter</option><option value="All">All</option><option value="Yes">Yes</option><option value="No">No</option></select>');
};

问题

当我第一次使用下拉列表时（例如，我选择了一个），程序 return 一些信息以及 dropdown2（这就是我想）。但是当我再次选择另一个选项（例如两个或其他）程序 return dropdown2 再次。所以我得到两个 dropdown2.

我需要做什么才能只显示一次 dropdown2。类似于：如果 dropdown2 已经添加到页面，请不要调用函数 getFilterOption。

Answer 1

使用 html() 函数代替 append()。 html() 替换之前的 html，而 append() 在现有的 html 之后追加新的 html。

$("#TargetFilterOption").html('<select id="filter_class1" name="filter1" data-privelesid1="".$priveles_id."" onchange="getFilter1(this.value)"><option value="">Filter</option><option value="All">All</option><option value="Yes">Yes</option><option value="No">No</option></select>')

Answer 2

如果您只想调用一次，请使用 jquery

中的一个函数

$('select').one('change',function getFilterOption() 
{
$("#TargetFilterOption").append('<select id="filter_class1" name="filter1" data-privelesid1="".$priveles_id."" onchange="getFilter1(this.value)"><option value="">Filter</option><option value="All">All</option><option value="Yes">Yes</option><option value="No">No</option></select>');
});

jQuery 一次又一次地调用函数

jQuery keeps calling the function again and again

javascript

jquery

ajax

dropdown