add select box with row using JavaScript

Question

I want that in newly created all options of select box to be present and I want to do it javascript. But I cant figure out how to do when there are too many options

<table id="newtable">
    <tr>
        <td>
            <input name="name" type="text" id="name"/>
        </td>
        <td>
            <select name="gender" id="gender">
                <option>Male</option>
                <option>Female</option>
            </select>
        </td>
        <td>
            <input name="add_button" type="button" id="add_button" value="Add"/>
        </td>
    <tr>
</table>

var itemCount = 0;
$(document).ready(function() {
    var objs = [];
    var temp_objs = [];
    $("#add_button").click(function() { 
        var html = "";
        var obj = {
            "name" :  $("#name").val(),
            "gender" :  $("#gender").val(),
        }  
        $("#name").val('');
        $("#gender").val(''),
        objs.push(obj);
        itemCount++;
        html = "<tr>" +
            "<td><INPUT type='text' name='txt1[]'  value='" + obj['name'] + "'/></td>" + 
            "<td><select><option>" + obj['gender'] + "</select></option></td></tr>";            
        $("#newtable").append(html);
    });
});

I answered your question with working code, please let me know if it was helpful (you can click the up arrow on my answer) and, if it solved your problem, you can also click the check below the arrows to accept the answer. — Armfoot, Jun 12 '15 at 12:47
@Armfoot Thanks, your code helped, with a futher tweeking I it serving my purpose — Swinn, Jun 13 '15 at 07:24

score 0 · Answer 1 · answered Jun 12 '15 at 11:15

Just make it as simple. Use below Code. It will solve your issue.

<script type="text/javascript">
$(document).ready(function(){
  $( "#add_button" ).click(function() { 
  var newVal=$("#name").val(); 
  var s= document.getElementById('gender');
  s.options[s.options.length]= new Option(newVal); 
  });
});
</script>

And your html will be as below:

<table id="newtable">
  <tr>
      <td>
          <input name="name" type="text" id="name"/>
      </td>
      <td>
          <select name="gender" id="gender">
              <option>Male</option>
              <option>Female</option>

          </select>
      </td>
      <td>
          <input name="add_button" type="button" id="add_button" value="Add"/>
      </td>
  <tr>
</table>

^thanks you but I think it will increase the options, I want to clone the row with inputs kept intact, and select box showing previous selected value along with other option available(2 in this case). — Swinn, Jun 12 '15 at 11:36

score -1 · Accepted Answer · edited May 23 '17 at 12:03

I believe clone() will be the best option for your example. You can copy the behavior of the button as well by using clone(true, true) (sets the options withDataAndEvents and deepWithDataAndEvents). Run the code below to check:

$(document).ready(function() {
  $(".add_button").click(function() {
    var currentRow = $(this).parents("tr");
    var nr = currentRow.clone(true, true);
    nr.find(".name").val('');
    currentRow.after(nr); //instead of `$("#newtable").append(nr);`: it places the new row after the clicked row
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="newtable">
  <tr>
    <td>
      <input name="name" type="text" class="name" />
    </td>
    <td>
      <select name="gender" class="gender">
        <option>Male</option>
        <option>Female</option>

      </select>
    </td>
    <td>
      <input name="add_button" type="button" class="add_button" value="Add" />
    </td>
  </tr>
</table>

From your code, I needed to add a slash in the last <tr> to close it and also change the ids to classes (since there are going to be a lot of them).

Hope it helps!

add select box with row using JavaScript

2 Answers2