How to replace multiple select elements in jQuery?-CodePudding

I am trying to do multiple things at the same time...

Replace a select dropdown
Have the select dropdown trigger the visibility of a div (it's a child of the div after #1).

I have this 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 >
  <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" >
    <option value="ASC">Asc</option>
    <option value="DESC" selected="selected">Desc</option>
  </select>
</div>

<div >
  <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" >
    <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 >
  <option value="edited_by_me">Edited by me</option>
  <option value="created_by_me">Created by me</option>
</select>
<select >
  <option value="edited_by_me">Edited by me</option>
  <option value="created_by_me">Created by me</option>
</select>

This works as intended but I am very unhappy I needed to add the same <select snippet-code-js lang-js prettyprint-override">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 >
  <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" >
    <option value="ASC">Asc</option>
    <option value="DESC" selected="selected">Desc</option>
  </select>
</div>

<div >
  <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" >
    <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 >
  <option value="edited_by_me">Edited by me</option>
  <option value="created_by_me">Created by me</option>
</select>





    
CodePudding user response：

Create a div to hold the moved selects, and use append() to move the selects there.


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 >
  <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" >
    <option value="ASC">Asc</option>
    <option value="DESC" selected="selected">Desc</option>
  </select>
</div>

<div >
  <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" >
    <option value="ASC">Asc</option>
    <option value="DESC" selected="selected">Desc</option>
  </select>
</div>

<div id="select-container">
</div>