On my page, i have two select list with elements et one select list where i ll append the list selected.
My first select contain some elements, and it s called REGIONS
<select name="REGIONS" id="REGIONS" size="7" class="form-control" multiple="">
<option value="01">01 - GUADELOUPE</option>
<option value="02">02 - MARTINIQUE</option>
<option value="03">03 - GUYANE</option><option value="04">04 - LA REUNION</option>
</select>
This second select , with id "LIST_DEP", is dynamic that means it depends by the item that has selected in the #REGIONS (there are showed the départements of the region selected) .
<select name="LISTE_DEP" id="LISTE_DEP" onchange="" size="5" class="form-control" multiple=""><option value="91">91 - ESSONNE</option>
<option value="92">92 - HAUTS-DE-SEINE</option>
<option value="75">75 - PARIS</option>
<option value="77">77 - SEINE-ET-MARNE</option>
<option value="93">93 - SEINE-SAINT-DENIS</option>
<option value="94">94 - VAL-DE-MARNE</option>
<option value="95">95 - VAL-D'OISE</option><option value="78">78 - YVELINES</option>
</select>
At least, i have a third select called GEO_SELECTED (at begin it s empty) where i will append, with a double ckick on the region in the first list REGIONS, the list showed in LIST_DEP .
All it work fine ! but i would like check if in GEO_SELECTED, there is already the selected list beacause if i click for two time, or more, on the same REGIONS, that will be append every time that i do double click.
That's my function:
function addRegions()
{
var regions =$("#LISTE_DEP > option").clone();
for(i = 0; i < regions.length;i ){
//if ($("#GEO_SELECTED").has(regions[i]).length == 0) in this condition i would like check if the list is already append
$("#GEO_SELECTED").append(regions[i]);
}
}
How can i check if the list is already append? Thank you!
CodePudding user response：
In my opinion, the following can point you in the right direction.
Here's a recording of the below code in action:
( function( $ ) {
'use strict';
// Get all our select fields,
const $regions = $( 'select[name="regions"]' );
const $departments = $( 'select[name="departments"]' );
const $selected = $( 'select[name="selected"]' );
// Listen for click on one of our action buttons.
$( document ).on( 'click', '[data-list-action]', function( event ) {
event.preventDefault();
const $button = $( this );
switch( $button.data( 'list-action' ) ) {
case 'add':
// Get the current values (array of option values).
const regionsValue = $regions.val();
const departmentsValue = $departments.val();
// Get releated option DOM elements from array values.
const $selectedRegions = $regions.find( 'option' ).filter( function() {
return regionsValue.includes( $( this ).attr( 'value' ) );
} );
const $selectedDepartments = $departments.find( 'option' ).filter( function() {
return departmentsValue.includes( $( this ).attr( 'value' ) );
} );
// Add their relative types (use when being removed from the selected field).
$selectedRegions.data( 'type', 'regions' );
$selectedDepartments.data( 'type', 'departments' );
// Add to selected list.
$selected.append( $selectedRegions );
$selected.append( $selectedDepartments );
break;
case 'remove':
// Get all the selected values we want to remove.
const selectedValue = $selected.val();
const $selectedOptions = $selected.find( 'option' ).filter( function() {
return selectedValue.includes( $( this ).attr( 'value' ) );
} );
// Move selected values back into their original select fields.
$selectedOptions.each( function() {
const $option = $( this );
const type = $option.data( 'type' );
$( `select[name="${type}"]` ).append( $option );
} );
break;
}
// Sort options.
const $orderedRegions = $regions.find( 'option' ).sort( ( a, b ) => $( b ).text() < $( a ).text() ? 1 : -1 );
const $orderedDepartments = $departments.find( 'option' ).sort( ( a, b ) => $( b ).text() < $( a ).text() ? 1 : -1 );
const $orderedSelected = $selected.find( 'option' ).sort( ( a, b ) => $( b ).text() < $( a ).text() ? 1 : -1 );
// Replace sorted options.
$regions.append( $orderedRegions );
$departments.append( $orderedDepartments );
$selected.append( $orderedSelected );
} )
} )( jQuery );<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container my-5">
<div class="row">
<!-- Start : Append column --->
<div class="col-6">
<label class="form-label">Regions</label>
<select name="regions" size="7" class="form-control mb-4" multiple="">
<option value="regions-1">Region 1</option>
<option value="regions-2">Region 2</option>
<option value="regions-3">Region 3</option>
<option value="regions-4">Region 4</option>
<option value="regions-5">Region 5</option>
<option value="regions-6">Region 6</option>
<option value="regions-7">Region 7</option>
<option value="regions-8">Region 8</option>
<option value="regions-9">Region 9</option>
</select>
<label class="form-label">Departments</label>
<select name="departments" size="7" class="form-control mb-4" multiple="">
<option value="departments-1">Department 1</option>
<option value="departments-2">Department 2</option>
<option value="departments-3">Department 3</option>
<option value="departments-4">Department 4</option>
<option value="departments-5">Department 5</option>
<option value="departments-6">Department 6</option>
<option value="departments-7">Department 7</option>
<option value="departments-8">Department 8</option>
<option value="departments-9">Department 9</option>
</select>
</div>
<!-- End : Append column --->
<!-- Start : Selected column --->
<div class="col-6 d-flex flex-column">
<label class="form-label">Selected</label>
<select name="selected" class="form-control mb-4 flex-grow-1" multiple="">
</select>
</div>
<!-- End : Selected column --->
</div>
<!-- Start : Actions -->
<div class="row">
<div class="col-6">
<button data-list-action="add" class="btn btn-success w-100">Add to selection</button>
</div>
<div class="col-6">
<button data-list-action="remove" class="btn btn-danger w-100">Remove selection</button>
</div>
</div>
<!-- End : Actions -->
</div>