jquery - Adding a dropdown input box by clicking a plus button -
jquery - Adding a dropdown input box by clicking a plus button -
i trying add together box predefined values in clicking plus button variable number in define max add-on 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 in html file , want, if user selects language, user has oportunity click "plus button/ link" add together 1 more of same box. want limit amount of addable selects variable number can alter if needed.
i have found similar examples here dont know jquery , not sure how phone call process, hope guys can help me out.
kinda in pseudo code:
on.click -> add.item(select); if item.number = or > 5 -> add.item = false;
thanks in advance!
you need clone existing select
, append container, keeping count. can utilize number of options in original select
restrict number of new ones. also, importantly have create sure give unique id
each new select
create.
something on lines of this:
class="snippet-code-js lang-js prettyprint-override">var total; // auto limit based on number of options // total = $("#nativelangdrop").find("option").length - 1; // hard code 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); } });
class="snippet-code-html lang-html prettyprint-override"><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=" + " />
jquery html button add box
Comments
Post a Comment