通过点击加号按钮添加一个下拉输入框 [英] Adding a dropdown input box by clicking a plus button

问题描述

我试图通过点击加号按钮，在它的变量数来定义的最大增加新的盒子添加在它predefined值的框。

 母语：其中; BR＆GT;
            ＆LT;选择名称=nativelangID =nativelangdrop＆GT;
                ＆LT; PHP
                    如果（$文件= @fopen（'TXT / languages​​.txt'，'R'））{
                    而（（$行=与fgets（$文件））！== FALSE）{
                    回声＆LT;选项＆GT; {$行}＆LT; /选项＆gt;中;
                    }
                    FCLOSE（$文件）;
                    }
                ？＆GT;
            ＆LT; /选择＆GT;
 

我有这在我的HTML文件，我想，如果用户选择的语言，用户有oportunity点击一个加号按钮/链接来增加一个相同的盒子。我也想可添加选择的数量限制，如果需要，我可以改变一个变量的数量。

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

还挺喜欢这个伪code：

  on.click  - ＆GT; add.item（选择）;
    如果item.number =或GT; 5  - ＆GT; add.item = FALSE;
 

在此先感谢！

解决方案

您需要克隆现有的选择然后追加那些容器，保持一个计数。您可以使用选项的数量在原来的选择来限制新的数量。此外，重要的是你必须确保你给一个独特的 ID 每一个新的选择创建

在此行的内容：

\r

\r

VAR总;\r
\r
//要自动限制基于选项的数目\r
//总= $（＃nativelangdrop），发现（选项），长度为 - 1。\r
\r
//硬code极限\r
总= 5;\r
\r
\r
$（＃addBtn）。在（点击，函数（）{\r
    VAR CTR = $（＃额外的）发现的长度。（额外）。\r
    如果（CTR＆LT;累计）{\r
        。变量$ DDL = $（＃nativelangdrop）的clone（）;\r
        $ ddl.attr（ID，DDL+ CTR）;\r
        $ ddl.addClass（额外）;\r
        $（＃额外的）追加（$ DDL）;\r
    }\r
}）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/jquery/2.1.1/jquery.min.js\"></script>\r
＆LT;选择ID =nativelangdrop＆GT;\r
    ＆LT;期权价值=1＆GT;语言1 LT; /选项＆GT;\r
    ＆LT;期权价值=2＆GT;语言2'; /选项＆GT;\r
    ＆LT;期权价值=3＆GT;语言第3版; /选项＆GT;\r
    ＆LT;期权价值=4＆GT;语言4℃; /选项＆GT;\r
＆LT; /选择＆GT;\r
＆LT;跨度ID =额外的＆GT;＆LT; / SPAN＆GT;\r
＆LT;小时/＆GT;\r
＆LT;输入ID =addBtn类型=按钮值=+/＆GT;

\r

\r

\r

i am trying to add a box with predefined values in it by clicking a plus button with a variable number in it to define the max addition of new boxes.

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>

i have this in my html file and i want, if a user selects a language, that the user has the oportunity to click a "plus button/ link" to add one more of the same box. I also want to limit the amount of addable selects to a variable number that i can change if needed.

i have found some similar examples here but i dont know any jquery and am not sure how to call this process, so i hope you guys can help me out.

kinda like this in pseudo code:

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

Thanks in advance!

解决方案

You need to clone the existing select and then append those to a container, keeping a count. You can use the number of options in the original select to restrict the number of new ones. Also, importantly you have to make sure that you give a unique id to each new select you create.

Something on the lines of this:

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);
    }
});

<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=" + " />

这篇关于通过点击加号按钮添加一个下拉输入框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！