当选择完成时，淡出添加更多链接，否则隐藏它

Question

我做了一个下拉菜单，我想克隆"添加更多"点击。我只希望该链接出现在一个选择，而不是默认的一个。

另外，每个克隆的下拉菜单不应该包含在它之前的下拉菜单中选择的选项。

如果我在第一个下拉菜单中选择"Show Add More(1)"，那么第二个下拉菜单应该只有

<option value="3">Show Add More (2)</option>
<option value="4">Show Add More (3)</option>

剩下的

，而不是所有的选项(当然要去掉默认选项)

下面是我的代码:

     <div id="template">
    <select name="category0">
        <option value="1">Hide Add More</option>
        <option value="2">Show Add More (1)</option>
        <option value="3">Show Add More (2)</option>
        <option value="4">Show Add More (3)</option>
    </select> 
    <a href="javascript:void(0)" class="remove" onClick="removeFilterCat(this);">x</a>                                      
</div>
<div id="add_more_cat"></div>
<a href="javascript:void(0)" onClick="addFilterCat('template', 'add_more_cat');" id="add_more_text">+ Add more</a>
<script>
var filter_counter = 1;
function addFilterCat(divName, template) {
    if (filter_counter < 5) {
        var newdiv = document.createElement('div');
        newdiv.innerHTML = document.getElementById(divName).innerHTML;
        newdiv.className = 'added';
        document.getElementById(template).appendChild(newdiv);
        filter_counter++;
        if (filter_counter == 5) {
            $("#add_more_text").css("display", "none");
        }
    }
}
function removeFilterCat(obj) {
    if (obj.parentNode.className == 'added') {
        obj.parentNode.parentNode.removeChild(obj.parentNode);
        filter_counter--;
        if (filter_counter < 5) {
            $("#add_more_text").css("display", "inline");
        }
    }
}
</script>

请帮我弄清楚!

Answer 1

如果我没理解错的话，这就是你需要的。

小提琴

我改变了整个东西使用jQuery，因为它是允许的，你已经在使用。

代码正在克隆前一个元素，并按要求删除选中的值。

如果有帮助，请告诉我!

$("#add_more_text").click(function () {
    if (filter_counter < 5) {
        var newdiv = $("<div>");
        newdiv.html($("#template").html());
        newdiv.attr('class', 'added');
        $("#templates").append(newdiv);
        var toRemove = newdiv.prev().children('select').find(':selected').val();
        newdiv.find("select option[value='" + toRemove + "']").remove();
        var a = newdiv.children('a').eq(0);
        a.on('click', function () {
            console.log(a);
            remove(a);
        });
        filter_counter++;
        if (filter_counter == 5) {
            $(this).hide();
        }
    }
});