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>

Answer 2

我相信clone()将是您示例的最佳选择。您也可以使用clone(true, true) (sets the options withDataAndEvents and deepWithDataAndEvents)复制按钮的行为。运行以下代码检查：

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

从你的代码中，我需要在最后<tr>中添加一个斜杠来关闭它，并将id更改为类（因为它们会有很多）。

希望它有所帮助！

使用JavaScript添加带行的选择框

2 个答案: