Question

使用Jquery克隆我的当前代码正在生成新的id创建克隆...但我没有得到的是在第一个HTML选择如果我选择一些选项它将获得选项的值并填充到下一个盒子。但是使用我当前的代码克隆发生了，但是当我选择HTML选择OPT时，原始文本框中的值正在更改，而不是填充在当前文本框中。

这是我的HTML代码

<div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
<label>School Name</label>
<br/>
<select onchange="getSchoolName(this)" class="slt_Field" id="txt_schName" name="txt_schName"d>
    <option value="">Please Select</option>
    <option value="Emirates College of Technology- UAE">COL000001</option>
    <option value="Al Khawarizmi International College- UAE">COL000002</option>
    <option value="Syscoms College">COL000003</option>
    <option value="Abounajm Khanj Pre-Uni Center">COL000004</option>
    <option value="Advanced Placement">COL000005</option>
    <option value="Al Buraimi College (Uni Clge)">COL000006</option>
    <option value="Al-Ain Community College">COL000007</option>
    <option value="AMA Computer College">COL000008</option>
    <option value="Arab Academy for Bankg and Fin">COL000009</option>
    <option value="ARABACDSCITECHMARTIMETRNS">COL000010</option>
    <option value="Arapahoe Community College">COL000011</option>
</select>
</div>
<div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
<br>
<input type="text" class="ipt_Field" name="school_Name" id="school_Name" disabled/>
</div>
<div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
   <label><span class="text-error">*</span>High School Avg / CGPA</label>
   <br/>
  <input type="text" class="ipt_Field" id="ipt_Havg" name="ipt_Havg" />
</div>
<div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
    <label><span class="text-error">*</span>Grade Type @</label>
  <br/>
  <select class="slt_Field" id="ipt_grd" name="ipt_grd">
    <option value="">Please Select</option>
    <option value="n">100</option>
    <option value="n1">4</option>
    <option value="c">CHAR</option>
  </select>
</div>

这是我的小提琴Link

请帮助我

提前致谢马哈德

Answer 1

你有一些问题。

最重要的是，如果您要克隆并添加这样的元素，那么您应该使用classes来访问元素而不是Ids必须跟上元素的数量并拥有一堆增量ID。
接下来，您的js函数getSchoolName(data)调用document.getElementById("school_Name").value = data.value;，这意味着每当有人更改调用getSchoolName(data)的select时，您都会将所选文本设置为ID为{{1}的元素{1}}而不是相应的元素。通过修复第一期问题来解决这个问题。
您的school_Name和edu_add_button按钮上都有less个课程，因此他们同时添加了克隆
此外，您应该将功能绑定到元素而不是more。
如果用户在框中键入然后添加新行，则克隆的元素将包含与克隆的元素相同的所有文本/选择。您应该在加载时存储第一行的副本，并使用它来使后续克隆避免这种情况。

这应该让你前进：

Here's a working jsFiddle

onchange="getSchoolName(this)"

// store a copy of the first row when the page loads
// later, use this copy to make your new elements so the 
// clones dont contain the same text as the cloned elements
$('.cloned-row1:eq(0)').data('stored-clone', $('.cloned-row1:eq(0)').clone())

$(document).on("click", ".edu_add_button", function() {
  var i = $('.cloned-row1').length;
  $('.cloned-row1:eq(0)').data('stored-clone').clone().insertAfter(".cloned-row1:last");
});

$(document).on('click', ".btn_less1", function() {
  var len = $('.cloned-row1').length;
  if (len > 1) {
    $(this).closest(".cloned-row1").remove();
  }
});

$(document).on('change', '.txt_schName', function() {
  var cur = $('.txt_schName').index($(this));
  $('.school_Name').eq(cur).val($(this).val())
});

Answer 2

只需更新 getSchoolName 功能。

function getSchoolName(data) {
    var parentContainer = $(data).closest(".cloned-row1");
    $("input[name='school_Name']",parentContainer).val(data.value);
}

我只是更新您的小提琴代码。要运行代码，请检查Link

HTML选择使用克隆jQuery时不生成的下拉值

2 个答案:

Here's a working jsFiddle