javascript - 更改下拉列表后，将出现一个新的 div，但没有第一个类别值

Question

<div class="radio">
<input type="radio" id="test2" name="specific_content" value="2">
<label for="test2">
    <div class="col-md-4">
        <select class="form-control" id="content-form" name="content_form">
            <option selected disabled hidden>Select</option>
            <option value="category">Category</option>
            <option value="genre">Genre</option>
            <option value="cast">Cast</option>
        </select>
    </div>
    <div class="col-md-4">
        <select class="form-control content-type-section" id="content_type" name="content_type" >
            <option value='0'>Select</option>
            <option value="123">Movie</option>
            <option value="321">TV</option>
            <option value="345">Cast</option>
            <option value="987">Genre</option>
        </select>
    </div>
    <div class="col-md-4">
        <select class="form-control condition-section" id="sel1" name="conditions" disabled="disabled" onchange="showAnotherSection()">
            <option value='0'>Select</option>
            <option value="1">AND</option>
            <option value="2">OR</option>                                
        </select>
    </div>
</label>

上面是我的 div 部分，我想在更改 AND/OR 下拉列表后再次显示相同的 div。如果第一个 div 选择了 Category 选项，那么在新来的 div 中不应该有相同的 Category 选项。同样，如果在第一次选择时选择了 Genre，那么 genre 将不会在新出现的 div 中再次显示。

下面是下拉字段的屏幕截图

Answer 1

有很多方法可以做到这一点。我想建议你不要在 JS 方面放太多重量。但是，这可以使用 jQuery Clone 轻松完成。 .

.clone() : Create a deep copy of the set of matched elements.

试试这个，

HTML

<div class="radio">
<input type="radio" id="test2" name="specific_content" value="2">
<label for="test2">
<div class="col-md-4">
    <select class="form-control" id="content-form" name="content_form">
        <option selected disabled hidden>Select</option>
        <option value="category">Category</option>
        <option value="genre">Genre</option>
        <option value="cast">Cast</option>
    </select>
</div>
<div class="col-md-4">
    <select class="form-control content-type-section" id="content_type" name="content_type" disabled="disabled" onchange="removeDisableFromCondition(this)">
        <option selected disabled hidden>Select</option>
        <option value="123">Movie</option>
        <option value="321">TV</option>
        <option value="345">Cast</option>
        <option value="987">Genre</option>
    </select>
</div>
<div class="col-md-4">
    <select class="form-control condition-section" id="sel1" name="conditions" disabled="disabled" onchange="showAnotherSection()">
        <option selected disabled hidden>Select</option>
        <option value="1">AND</option>
        <option value="2">OR</option>                                
    </select>
</div>
<div id="cloned_copy">

</div>

JS

$(document).ready(function() {
    $('#sel1').change(function() {
     var selectedVal = $('#content-form').val();     
     var target = $("#cloned_copy");
     target.empty();
       $("#content-form").clone().appendTo(target);
     $("#cloned_copy option[value='"+ selectedVal +"']").remove();
  });
});

看 fiddle ，

https://jsfiddle.net/anjanasilva/8kdmhboz/