在我的頁面上，我有兩個帶有元素的選擇串列和一個選擇串列，我將在其中附加所選的串列。
我的第一個選擇包含一些元素，它被稱為區域
<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>
第二個選擇，id 為“ LIST_DEP ”，是動態的，這意味著它取決于在#REGIONS 中選擇的專案（顯示了所選區域的部門）。
<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>
至少，我有一個名為GEO_SELECTED的第三個選擇（一開始它是空的），我將在其中附加，在第一個串列REGIONS 中的區域上雙擊，該串列顯示在LIST_DEP 中。
一切正常！但我想檢查GEO_SELECTED中是否已經有選定的串列，因為如果我在同一個 REGIONS 上單擊兩次或更多次，每次我雙擊時都會附加該串列。
這就是我的功能：
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]);
}
}
如何檢查串列是否已附加？謝謝！
uj5u.com熱心網友回復：
在我看來，以下內容可以為您指明正確的方向。
這是以下代碼的記錄：
( 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/366037.html
標籤：javascript 查询