how to add new select box after clicking a button in jquery

Benjamin Española

i dont know if its possible using jquery,..i have a select option that has an array of data came from database and what i want is that whenever i click a button, another select option will popout like the first select option.. here is the code of my select option

       <select class="form-control" name="room[]" id="room[]">
        <option value="" default>Select</option>
        <?php
        $room = $subjectsClass->room();
        foreach ($room as $key => $value) {
        echo '<option value=" ' . $value['room_id'] .' ">' . $value['room_no'] . '</option>';
        }
        ?>
        </select>
    <button type="button" class="btn btn-default" id="addRooms" >Add more Rooms?</button>
<script>

$('#addRooms').click(function(){
  //append another select box with data from database,..how??
});

</script>

Macainian

Let's say you have that wrapped into a div like:

<div id="the_div_of_wrapping"> all your stuff </div>

Then I would do:

var the_select = $("#room[]");
var the_id = the_select.prop("id");
var the_number_of_selects = $("select").length;
var the_div_of_wrapping = $("#the_div_of_wrapping");

the_select.clone().prop("id", the_id + the_number_of_selects);
the_div_of_wrapping.append(the_select);

.

Update:

As discussed in the comments, I would remove id since it is unnecessary and then the code would be:

var the_select = $("#room[]");
var the_div_of_wrapping = $("#the_div_of_wrapping");

the_select.clone();
the_div_of_wrapping.append(the_select);

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Adding new rows to table on clicking button in JQuery

From Dev

How can I add an Action after clicking on an ActionBar's Button?

From Dev

How to get the selected ID of a UL / LI Box by Clicking on a Button - Jquery

From Dev

Add elements to select box by clicking on another selectbox - Javascript

From Dev

How to change color button after clicking on it

From Dev

Execute jQuery function after clicking <button>

From Dev

How to load an image with jquery after clicking a button and get data with ajax?

From Dev

How to show red border at Invalid Input Box after clicking Submit button with angularjs

From Dev

Is it possible to add same existing dom structure after clicking button jquery?

From Dev

how to change the text box,select box and check box value after the button click event?

From Dev

How to add new select box every time I change value of new created selectbox in jQuery?

From Dev

Adding new <select> tag by clicking on the button

From Dev

How to delete button after clicking on "delete" button?

From Dev

How to add a new entry box when clicking a button (Python, Tkinter)

From Dev

how to enable add button after validation of text box?

From Dev

Dialog box closes slowly after clicking send button

From Dev

How to minimize sliding menu after clicking an button

From Dev

Launch new activity after clicking a button

From Dev

Cant see Alert Box after clicking a button

From Dev

Confirmation Box : OK button not working after clicking on Cancel Button

From Dev

How to add new select box every time I change value of new created selectbox in jQuery?

From Dev

How to temorary store unique row into html table after by clicking add button?

From Dev

How to make a white popup text box appear after clicking a button?

From Dev

Unable to save data to sharedPreferences after clicking on the positive Button of dialog box

From Dev

how to post comment below the text box after clicking submit button?

From Dev

How to add a new option to a select in jQuery?

From Dev

how to change the value of data after clicking a button

From Dev

How to fill an echoed <select> with PHP, after clicking a button

From Dev

how to enable button only after select box and checkbox

Related Related

  1. 1

    Adding new rows to table on clicking button in JQuery

  2. 2

    How can I add an Action after clicking on an ActionBar's Button?

  3. 3

    How to get the selected ID of a UL / LI Box by Clicking on a Button - Jquery

  4. 4

    Add elements to select box by clicking on another selectbox - Javascript

  5. 5

    How to change color button after clicking on it

  6. 6

    Execute jQuery function after clicking <button>

  7. 7

    How to load an image with jquery after clicking a button and get data with ajax?

  8. 8

    How to show red border at Invalid Input Box after clicking Submit button with angularjs

  9. 9

    Is it possible to add same existing dom structure after clicking button jquery?

  10. 10

    how to change the text box,select box and check box value after the button click event?

  11. 11

    How to add new select box every time I change value of new created selectbox in jQuery?

  12. 12

    Adding new <select> tag by clicking on the button

  13. 13

    How to delete button after clicking on "delete" button?

  14. 14

    How to add a new entry box when clicking a button (Python, Tkinter)

  15. 15

    how to enable add button after validation of text box?

  16. 16

    Dialog box closes slowly after clicking send button

  17. 17

    How to minimize sliding menu after clicking an button

  18. 18

    Launch new activity after clicking a button

  19. 19

    Cant see Alert Box after clicking a button

  20. 20

    Confirmation Box : OK button not working after clicking on Cancel Button

  21. 21

    How to add new select box every time I change value of new created selectbox in jQuery?

  22. 22

    How to temorary store unique row into html table after by clicking add button?

  23. 23

    How to make a white popup text box appear after clicking a button?

  24. 24

    Unable to save data to sharedPreferences after clicking on the positive Button of dialog box

  25. 25

    how to post comment below the text box after clicking submit button?

  26. 26

    How to add a new option to a select in jQuery?

  27. 27

    how to change the value of data after clicking a button

  28. 28

    How to fill an echoed <select> with PHP, after clicking a button

  29. 29

    how to enable button only after select box and checkbox

HotTag

Archive