javascript - 使用 JavaScript 添加带有行的选择框

Question

我希望在新创建的选择框中的所有选项都存在，并且我想用 javascript 来实现。但当选项太多时我不知道该怎么办

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

Answer 1

就这么简单。使用下面的代码。它会解决您的问题。

<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>

你的 html 将如下所示:

<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>