Question

我在页面中有一个表单。在表单中，我有一个文本框和一个下拉列表。我正在使用ajax将所选值从下拉列表发送到另一个页面，在那里它将相应的值发送回自动填充新下拉列表的页面。它们也是用户可以从上面添加更多内容的选择。

但我得到的问题是，当我克隆父表单时，两个自动填充的下拉列表的值都会通过更改克隆下拉列表中的值来更改。

请帮我解决这个问题。这是我的代码。

<!--This is script for autopopute the dropdown list -->    
<script type="text/javascript">
$(document).ready(function(){ 
$("#selectionresult").hide(); 

$(".MyDropDown").change( function() { 
    $(".MyDropDown1").hide(); 
    $("#result").html('Retrieving ...'); 
    $.ajax({ 
        type: "POST", 
        data: "data=" + $(this).val(), 
        url: "t.cshtml", 
        success: function(msg){ 
            if (msg != ''){ 
                $(".MyDropDown1").html(msg).show(); 
                $("#result").html(''); 
            } 
            else{ 
                $("#result").html('<em>No item result</em>'); 
            } 
        } 
    }); 
}); 
}); 
</script>


<!-- This is my html code -->
<form method="post" action="">
<fieldset>
<p class="clone"><input type="text" name="hobby[]" class='input'/>
<label for="selection"> Select a Option:  

<select id="selection" name="selection" class="MyDropDown" >
<option value="">- Select Option Here -</option>
<option value="ip">IP</option>
<option value="responsecode">Response Code</option>
<option value="responsebody">ResponseBody</option>
<option value="filename">File Name</option>
<option value="keyword">Keyword</option>
</select>         </label>

<select id="selectionresult" class="MyDropDown1" name="selectionresult"></select>
</p>
<p id="result">&nbsp;</p>

<input type="submit" value=" Submit " />
</fieldset>
</form> 
<p><a href="#" class="add" rel=".clone">Add More</a></p>

我努力做好格式化工作。请帮我。这是我的HTML代码。

Answer 1

您是否更改了克隆列表的类或ID？在查看代码时，似乎只是在.MyDropDown1类中查找任何“更改”。因此，如果您克隆它，新克隆的更改 - 使用相同的类将导致其他更改（假设我正确理解您的问题）。

因此，更改克隆类（并连接任何代码）或者如果您创建更具体的选择器，例如#selection。如果要处理克隆的项目，请使用.clone > .MyDropDown1（或您已分配的新ID）。重点是，更改您的选择器，以便事件处理您希望的项目 - 通过使选择器更具体和/或更改ID。

要更改id或类，只需获取要克隆的元素，然后执行以下操作：

$('YourItemToClone').clone().attr('id','MyNewClonedId'); // change the id to class to put in new classes

使用Jquery克隆和自动填充下拉列表问题

1 个答案: