第二行选择标记不呈现同一行中的选择标记

Question

我已经动态地添加了一行，但是我的第二行选择标记更改了第一行选择标记。任何帮助，将不胜感激。

代码段

 function change(id) { 
       var url = ServerURL + "/StockService.asmx/GetStoneName?id=" + id; 
       $.getJSON(url, function (data) { 

        var $select = $('#ddlStoneName'); 
        $select.find('option').remove(); 
        for (var j in data) { 
         $select.append('<option value=' + data[j].Id + '>' + data[j].Name + '</option>'); 
        } 
       }); 
     } 

     $(document).delegate("#ddlStoneType", "change", function() { 
      change($("option:selected", this).val()); 
     }); 

$('#btnaddrow').click(function() { 
       $('#gvStoneDetail tbody>tr:last').clone(false).insertAfter('#gvStoneDetail tbody>tr:last');   return false; 
     }); 

Answer 1

注：

的#ID选择器选择与特定ID的元素。对每一个元素来说都是不争的事实。

你的主要问题是在这里：

var $select = $('#ddlStoneName'); 

你给了相同的id您second <select> tag，以及第一个，你帮助你得到这个好，在JavaScript中，如果你使用的是id对于element应该unique id for unique element

比方说，我有3周的div相同的ID：

<div id="mydiv">my div 1</div> 
<div id="mydiv">my div 2</div> 
<div id="mydiv">my div 3</div> 

的JavaScript会提醒我“我的DIV 1”如果我将执行这样的代码（和你的一样，但基本途径）：什么样的JavaScript需要做的是通过你的HTML

$(document).ready(function(){ 
    var selector = jQuery('#mydiv').text(); 
    alert(selector); 
}); 

在这种情况下

记录第一个标签，找到第一个相似的选择器并将其取值。你必须为每个元素使用不同的id /将它们标识为兄弟。

为您的代码，你可以做到这一点很容易地进入你想达到的，首先改变你的ID为类，那么它会工作，你希望它工作，所以#ddlStoneType将成为.ddlStoneType和#ddlStoneName将成为.ddlStoneName什么，你<select>标签内以及从改变他们：id="ddlStoneType" to class="ddlStoneType"等：

// removed your function {} and added its code inside the code below use the code below: 


    $(document).delegate(".ddlStoneType", "change", function() { 
     var id = $("option:selected", this).val(); 
     var $select = $(this).parent('.make').find('.ddlStoneName'); 
     var url = ServerURL + "/StockService.asmx/GetStoneName?id=" + id; 
      $.getJSON(url, function (data) { 
       $select.find('option').remove(); 
       for (var j in data) { 
        $select.append('<option value=' + data[j].Id + '>' + data[j].Name + '</option>'); 
       } 
      }); 
    }); 

这里是上的jsfiddle基本的例子：

http://jsfiddle.net/vsmf22tp/