克隆具有多个DIV的DIV，这些DIV在使用selected（）的模态中包含一个选择

Question

enter image description here I have a modal which opens a form, the form has a line with 4 fields

1. Select input field
2. Text
3. Select input field (filtered by first select)
4. Select input field (filtered by second select)

I want to clone this line with empty values. I was able to clone it, but in the cloned line, whenever I try to select a new value, it expands the first field in first line only.

Modal Code

<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");
}

Any Suggestion on the following:

1. Clear all input values
2. Remove the chosen class and reapply it on the cloned line

Answer 1

In general:

If the list is dynamic you should have some workaround, such as:

• Consider move the php generations to external ajax calls hosted in js functions.

• Use a binding of option of 3rd-parties like JQuery/KnockoutJS.

Anyway, if i understand your specific question well:

Clearing input values is possible like this:

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

OR

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

For clearing "select" elem you can also use:

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

if the empty option exists. OR you can set it to first one:

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

Removing class is possible too:

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

You can then add any other class:

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

Good luck!