克隆具有多个 DIV 的 DIV，这些 DIV 在使用 selected() 的模式中包含一个选择

Question

enter image description here我有一个打开表单的模式，表单有一行包含 4 个字段

1. 选择输入字段
2. 文字
3. 选择输入字段（按第一次选择过滤）
4. 选择输入字段（按第二次选择过滤）

我想用空值克隆这一行。我可以克隆它，但是在克隆的行中，每当我尝试选择一个新值时，它只会扩展第一行中的第一个字段。

模式代码

<div id="add-ins-company">
<div class="form-group">
<div class="col-md-4">
<div class="input-group col-md-12">
<select id="mq_ins_company" name="mq_ins_company[]" class="modal-select-chosen" data-placeholder="Insurance Company" onchange="getpolicyclass(this.value);" required>
<option value=""></option>
<?php 
$company_id = mysqli_real_escape_string($GLOBALS['con'], $_SESSION['company_id']);
$sql = "select * from insurance_companies where ins_comp_company = $company_id";
$data = FetchMultipleData($sql);
for($i=0;$i<count($data);$i++) {
?>
<option value="<?php echo $data[$i]['ins_comp_id']; ?>"><?php echo $data[$i]['ins_comp_name'];?></option>
<?php } ?>
</select>
</div>
</div>
<div class="col-md-2">
<input type="email" id="mq_fees" name="mq_fees[]" class="form-control" placeholder="Fees" required="required">
</div>
<div class="col-md-3">
<div id="mq_class"></div>
</div>
<div class="col-md-3">
<div id="mq_size"></div>
</div>
</div>
</div>

JavaScript

function addcompanyrow() {
  var row = $('#add-ins-company').clone(true);
  $(row).insertAfter("#add-ins-company");
}

关于以下的任何建议：

1. 清除所有输入值
2. 删除选择的类并在克隆线上重新应用它

Answer 1

一般：

如果列表是动态的，您应该有一些解决方法，例如：

• 考虑将 php 代移到 js 函数中托管的外部 ajax 调用。

• 使用第三方选项的绑定，如 JQuery/KnockoutJS。

无论如何，如果我能很好地理解您的具体问题：

可以像这样清除输入值：

$('<the_input_selector>').removeAttr('value');

或

$('<the_input_selector>').val('');

对于清除“选择”元素，您还可以使用：

$('<the_select_selector>').val('');

如果存在空选项。或者您可以将其设置为第一个：

$('<the_select_selector>').prop('selectedIndex',0);

也可以删除类：

$('<the_select_selector>').removeClass('modal-select-chosen');

然后您可以添加任何其他类：

$('<the_select_selector>').addClass('<any_other_class>');

祝你好运！