Question

我制作了一个我想要克隆的下拉菜单＆＃34;添加更多＆＃34;单击。我只希望一旦做出选择而不是默认链接就会出现该链接。

此外，每个克隆的下拉列表都不应包含在其之前的下拉列表中选择的选项。

所以，如果我选择＆＃34;显示添加更多（1）＆＃34;在第一个下拉列表中，第二个下拉列表应该只有

<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

如果我理解正确，这就是你需要的。

<强> FIDDLE

我改变了所有使用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();
        }
    }
});

进行选择时FadeIn Add More链接，否则隐藏它

1 个答案: