如何替换jQuery中的多个select元素

Question

我正试图同时做多件事。。。

1. 替换选择下拉列表
2. 让select下拉菜单触发div的可见性(它是#1之后div的子级(

我有这个HTML:

let $displays = $('.view-id-dashboard');
$displays.eq(1).toggle();
let $selects = $('.dashboard-select');
$('select[data-drupal-selector="edit-sort-order"]').each(function(index) {
$("label[for='" + this.id + "']").text('Edited/Created by me');
this.replaceWith($selects.get(index));
});
$selects.on('change', function() {
$selects.val(this.value);
$displays.toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="view view-dashboard view-id-dashboard view-display-id-embed_1">
<p>
First div, contains lots of things, I only kept the select dropdown to be replaced.
</p>
<select data-drupal-selector="edit-sort-order" id="edit-sort-order" name="sort_order" class="form-select form-element form-element--type-select">
<option value="ASC">Asc</option>
<option value="DESC" selected="selected">Desc</option>
</select>
</div>
<div class="view view-dashboard view-id-dashboard view-display-id-embed_2">
<p>
Second div, contains lots of things, again only kept the relevant select below.
</p>
<select data-drupal-selector="edit-sort-order" id="edit-sort-order" name="sort_order" class="form-select form-element form-element--type-select">
<option value="ASC">Asc</option>
<option value="DESC" selected="selected">Desc</option>
</select>
</div>
<p>
I added this verbatim and this is the problem.
</p>
<select class="dashboard-select form-select form-element form-element--type-select">
<option value="edited_by_me">Edited by me</option>
<option value="created_by_me">Created by me</option>
</select>
<select class="dashboard-select form-select form-element form-element--type-select">
<option value="edited_by_me">Edited by me</option>
<option value="created_by_me">Created by me</option>
</select>

这按预期工作，但我很不高兴我需要添加两次相同的<select class="dashboard-select。我尝试了.clone()、.add()等各种方法，但都无济于事。

Answer 1

这是一个经过调整的版本，在文档末尾只有一个select。

这个想法是隐藏它(用作模板(，并在初始化代码中克隆它。

let $displays = $('.view-id-dashboard');
$displays.eq(1).toggle();
let $selects = $('.dashboard-select').hide(); // There's only one now
$('select[data-drupal-selector="edit-sort-order"]').each(function(index) {
$("label[for='" + this.id + "']").text('Edited/Created by me');
this.replaceWith($selects.clone(true).show().get(0)); // Clone
});
// Refresh the collection: now there are three (including the template)
$selects = $('.dashboard-select');
$selects.on('change', function() {
$selects.val(this.value);
$displays.toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="view view-dashboard view-id-dashboard view-display-id-embed_1">
<p>
First div, contains lots of things, I only kept the select dropdown to be replaced.
</p>
<select data-drupal-selector="edit-sort-order" id="edit-sort-order" name="sort_order" class="form-select form-element form-element--type-select">
<option value="ASC">Asc</option>
<option value="DESC" selected="selected">Desc</option>
</select>
</div>
<div class="view view-dashboard view-id-dashboard view-display-id-embed_2">
<p>
Second div, contains lots of things, again only kept the relevant select below.
</p>
<select data-drupal-selector="edit-sort-order" id="edit-sort-order" name="sort_order" class="form-select form-element form-element--type-select">
<option value="ASC">Asc</option>
<option value="DESC" selected="selected">Desc</option>
</select>
</div>
<p>
I added this verbatim and this is the problem.
</p>
<select class="dashboard-select form-select form-element form-element--type-select">
<option value="edited_by_me">Edited by me</option>
<option value="created_by_me">Created by me</option>
</select>

Answer 2

创建一个div来保存移动的选择，并使用append()将选择移动到那里。

let $displays = $('.view-id-dashboard');
$displays.eq(1).toggle();
let $selects = $('select[data-drupal-selector="edit-sort-order"]');
let $container = $('#select-container');
$selects.each(function(index) {
$("label[for='" + this.id + "']").text('Edited/Created by me');
$container.append(this);
});
$selects.on('change', function() {
$selects.val(this.value);
$displays.toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="view view-dashboard view-id-dashboard view-display-id-embed_1">
<p>
First div, contains lots of things, I only kept the select dropdown to be replaced.
</p>
<select data-drupal-selector="edit-sort-order" id="edit-sort-order" name="sort_order" class="form-select form-element form-element--type-select">
<option value="ASC">Asc</option>
<option value="DESC" selected="selected">Desc</option>
</select>
</div>
<div class="view view-dashboard view-id-dashboard view-display-id-embed_2">
<p>
Second div, contains lots of things, again only kept the relevant select below.
</p>
<select data-drupal-selector="edit-sort-order" id="edit-sort-order" name="sort_order" class="form-select form-element form-element--type-select">
<option value="ASC">Asc</option>
<option value="DESC" selected="selected">Desc</option>
</select>
</div>
<div id="select-container">
</div>