Adding a drop down menu with jquery

Question

Here's the situation I have a webpage which has one drop down called prefer. I wanted the user to be able to choose one option and then have a link next to it called "Add" which generates another textbox with the same options, i was going to use jquery to show an additional drop down.

But if possible I wanted to put the select box in an array and then loop through this process infinitely. so I could call select name="prefer[]" and somehow put in a variable which increases.

Afterwards, I could use php to cycle through the array and utilize each one.

Could I do this with Javascript somehow?

Answer 1

You could clone the select box and append it to the form(I put it in a div). Edit: When you post you should get an array of values in php(prefer[index]).

 $('#add').click(function(){
      $('#myselect').after($('#myselect').clone());
 });


<form method="post" id="theForm">
      <div id="myselect">
        <select id="prefer" name="prefer[]">
          <option value="one">one</option>
          <option value="two">two</option>
          <option value="three">three</option>
          <option value="four">four</option>
          <option value="five">five</option>
        </select>
      </div>
      <input type="button" id="add" value="add">
      <input type="submit" id="submit" value="submit">
 </form>

php example:

<?php
$prefer = $_POST['prefer'];
// Note that $prefer will be an array.
foreach ($prefer as $s) {
  echo "$s<br />";
}
?>