Question

我正在尝试通过单击带有可变数字的加号按钮来添加一个包含预定义值的框，以定义新框的最大添加量。

Native language:<br>
            <select name="nativelang" id="nativelangdrop">
                <?php
                    if ($file = @fopen('txt/languages.txt', 'r')) {
                    while(($line = fgets($file)) !== false) {
                    echo "<option>{$line}</option>";
                    }
                    fclose($file);
                    }
                ?>
            </select>

我在我的html文件中有这个，我希望，如果用户选择一种语言，用户有机会点击“加号按钮/链接”再添加一个相同的框。我还想将可添加选项的数量限制为可变数量，如果需要我可以更改。

我在这里找到了一些类似的例子，但我不知道任何jquery，我不知道如何调用这个过程，所以我希望你们能帮助我。

在伪代码中有点像这样：

on.click -> add.item(select);
    if item.number = or > 5 -> add.item = false;

提前致谢！

Answer 1

您需要克隆现有的select，然后将它们附加到容器中，并保持计数。您可以使用原始select中的选项数量来限制新的选项数量。此外，重要的是，您必须确保为您创建的每个新id提供唯一的select。

有些事情就是这样：

＆＃13;

var total;

// To auto limit based on the number of options
// total = $("#nativelangdrop").find("option").length - 1;

// Hard code a limit
total = 5;


$("#addBtn").on("click", function() {
    var ctr = $("#additional").find(".extra").length;
    if (ctr < total) {
        var $ddl = $("#nativelangdrop").clone();
        $ddl.attr("id", "ddl" + ctr);
        $ddl.addClass("extra");
        $("#additional").append($ddl);
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="nativelangdrop">
    <option value="1">Language 1</option>
    <option value="2">Language 2</option>
    <option value="3">Language 3</option>
    <option value="4">Language 4</option>
</select>
<span id="additional"></span>
<hr />
<input id="addBtn" type="button" value=" + " />

＆＃13;

单击加号按钮添加下拉输入框

1 个答案: