第二行选择标记未在同一行中呈现选择标记

Question

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

代码段

        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提供相同的id，如果您使用element {unique id for unique element，则可以通过javascript帮助您改进1}}它应该是<div id="mydiv">my div 1</div> <div id="mydiv">my div 2</div> <div id="mydiv">my div 3</div>

让我说我有3个具有相同身份的div：

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

javascript会提醒我＆＃34;我的div 1＆＃34;如果我将执行这种代码（与你的相同但基本方式）：

#ddlStoneType

在这种情况下，javascript将执行的操作是浏览您的html文档，并使用它找到的第一个类似的选择器获取第一个标记并获取它的值。你必须为每一个元素使用不同的id /将它们识别为兄弟姐妹。

对于您的代码，您可以轻松实现您想要实现的目标，首先将您的ID更改为某个类，然后它将按您希望的方式工作，以便.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>'); } }); }); ，依此类推：

scanf

以下是jsfiddle的基本示例：

http://jsfiddle.net/vsmf22tp/