javascript - 动态创建的 Div 更改下拉选项

Question

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

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

我有一个表格如下:

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

如果我添加一个新服务器，它将允许我更改第一个服务器的选择，

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

我认为发生的情况是我的选择 ID 没有改变，我不确定为什么，我在底部放置了一个 JS 警报以验证“ed”在循环时是否发生变化。

最终结果我希望它能够更改第一个选择的值，然后当添加另一个服务器时能够更改这些选择值而不更改任何其他值，依此类推。

任何帮助都会很棒。

Answer 1

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

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

Here is a demo of what I understand of your projet, and a solution that I can give you.

大多数更改都与此相关:

$(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('');
    ...

<小时/>

• 您可以看到我将 id="item"更改为 class="item"(这样，克隆服务器就不会复制 id="item")。
• 我将数组移至代码顶部，以便每个函数都可以访问
• 我还将您的 populateSelect 函数和 $(function() {) 移至 new_server() 函数之外
• 我将 newDiv.find('.item').html(''); 添加到 new_server() 函数中，以便不克隆之前选择的选项。
• 我将 class="tableServer" 添加到表包装器中，以便在 populateSelect() 中动态定位它们