動態創建事業部更改下拉選項

// 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'正在改變，因爲它循環。

最終結果我正在尋找它能夠改變從第一個選擇的值，然後當另一個服務器被添加能夠改變這些選擇值而不改變任何其他等。

任何幫助將是偉大的。

來源

2015-04-20 Brian Curless

您正在使用計數器爲您的服務器動態創建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(''); 
    ...

你可以看到，我改變ID = 「項」類=「項目「（這樣，克隆的服務器不會重複id =」item「）。
我動了你的陣列上的代碼的頂部可以到達從每一個功能
我也動了你的populateSelect功能和$(function() {的new_server()功能
我加newDiv.find('.item').html('');到new_server()功能無法複製以前選擇的選項之外。
我將class="tableServer"添加到表包裝以便動態鎖定它們在populateSelect()

來源

2015-04-20 14:17:55 EdenSource

動態創建事業部更改下拉選項

回答

相關問題