Question

＆＃13;

// function to add set of elements
var ed = 1;

function new_server() {
    ed++;
    var newDiv = $('#server div:first').clone();
    newDiv.attr('id', ed);
    var delLink = '<a class="btn btn-danger" style="text-align:right;margin-right:65px" href="javascript:deled(' + ed + ')" > Delete server ' + ed + ' </a>';
    newDiv.find('tr:first th').text('Server ' + ed);
    newDiv.find('select:first').attr('id', 'cat' + ed);
    newDiv.append(delLink);
    $('#server').append(newDiv);
    newDiv.find('input:text').val('');

    web = new Array('CF9', 'CF10', 'CF11', 'ASP.NET', 'PHP', 'CMS', 'JAVA');
    db = new Array('MSSQL Express', 'MSSQL Web', 'MSSQL Standard', 'MYSQL');
    app = new Array('IMIS', 'TERMINAL', 'AD');

    populateSelect();

    $(function() {

      $('#cat' + ed).change(function() {
        populateSelect();
      });
    });

    function populateSelect() {
      cat = $('#cat' + ed).val();
      $('#item').html('');

      if (cat == 'Web') {
        web.forEach(function(t) {
          $('#item').append('<option>' + t + '</option>');
        });
      }

      if (cat == 'DB') {
        db.forEach(function(t) {
          $('#item').append('<option>' + t + '</option>');
        });
      }

      if (cat == 'App') {
        app.forEach(function(t) {
          $('#item').append('<option>' + t + '</option>');
        });
      }
    }
    alert(ed);
  }
  // function to delete the newly added set of elements

function deled(eleId) {
  d = document;
  var ele = d.getElementById(eleId);
  var parentEle = d.getElementById('server');
  parentEle.removeChild(ele);
  //ed--;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="server">
  <div id="1">
    <table border="3">
      <tbody>
        <tr>
          <th colspan="4" style="background-color:#b0c4de;">Server 1</th>
        </tr>
        <br>
        <tr>
          <td>Technology
            <br>
            <select name="tech[]" id="cat1">
              <option value="">Select</option>
              <option value="Web">Web</option>
              <option value="DB">DB</option>
              <option value="App">App</option>
              <option value="O">Other</option>
            </select>
            <br>
            <select id="item" name="techtype[]">
            </select>
            <br>
          </td>
          <td>CPU?
            <input type="text" name="cpu[]">
            <br>
          </td>
          <td>Memory?
            <input type="text" name="memory[]">
            <br>
          </td>
          <td>Disk Space?
            <input type="text" name="space[]">
            <br>
          </td>
        </tr>
        <br><a class="btn btn-info" href="javascript:new_server()"> Add New Server </a>
        <br>
      </tbody>
    </table>
  </div>
</div>

＆＃13;

我的表格如下：

在页面加载时，我无法更新任何选择项目。

如果我添加新服务器那么它将允许我更改第一个

中的选择

如果我创建第三个相同的结果。

我认为正在发生的事情是我对于选择的身份并没有改变我不知道为什么，我在底部放置了一个JS警报来验证“＃”;＆＃39;正在变化，因为它循环。

最终结果我正在寻找它能够从第一个更改select的值，然后当添加另一个服务器时能够更改那些选择值而不更改任何其他值等等。

任何帮助都会很棒。

Answer 1

您正在使用计数器为您的服务器动态创建ID，因此它们看起来像$("#"+cat+counter)。

问题是您还使用计数器影响populateSelect()中的列表，这意味着您只修改上次创建的服务器的列表内容。

Here is a demo我对你的项目的理解，以及我能给你的解决方案。

大多数变化都与此有关：

$(function () {
    $(document).on("change", '.cat', function () {
        populateSelect($(this).val, $(this).attr("id"));
    });
});

而且：

function populateSelect(listValue, listID) {

    var serverItem = $("#" + listID).closest(".tableServer").find('.item')
    cat = $("#" + listID).val();
    serverItem.html('');
    ...

您可以看到我为class =“item”更改了id =“item”（这样，克隆服务器就不会重复id =“item”）。
我将您的数组移到代码之上，以便可以从每个函数
我还将您的populateSelect功能和$(function() {移到了new_server()功能
我将newDiv.find('.item').html('');添加到new_server()函数中，以便不克隆以前选择的选项。
我向表包装器添加了class="tableServer"，以便在populateSelect()

动态创建Div Div下拉选项

1 个答案: