如何使用jQuery实现点击颜色下拉选项后移至指定区域并排序

Got it, let's fix up your code to meet those requirements—moving clicked color options to the .selected-color list and sorting the remaining items in the dropdown. Here's the complete working version, with step-by-step explanations:

Formatted HTML (cleaned up for readability) #

<div class="row-cont mb-10 controls">
  <div>Product Color</div>
  <ul class="select5-container variant-color selected-color">
    <!-- Selected colors will appear here -->
  </ul>
  <div class="select5__option-container color-select-holder">
    <ul class="row-cont select5__option span12 color-select" id="ssss">
      <li class="span6">
        <input type="checkbox" name="" value="White">
        <label class="mb-0">
          <a>
            <span class="colorpick-dot" style="background-color:#ffffff;"></span> White
          </a>
        </label>
      </li>
      <li class="span6">
        <input type="checkbox" name="" value="Black">
        <label class="mb-0">
          <a>
            <span class="colorpick-dot" style="background-color:#000000;"></span> Black
          </a>
        </label>
      </li>
      <!-- You can add more color options here -->
    </ul>
  </div>
</div>

Updated jQuery Code #

$("#ssss").on('click','li',function (e) {
  // Prevent default link behavior since we're using <a> tags
  e.preventDefault();
  
  const $selectedItem = $(this);
  const $targetList = $(".selected-color");
  
  // Skip if the item is already in the selected list
  if ($targetList.find(`li:contains(${ $selectedItem.find('a').text().trim() })`).length) {
    return;
  }
  
  // Move the clicked item to the selected color list
  $selectedItem.appendTo($targetList);
  
  // Sort the remaining items in the dropdown alphabetically by color name
  const $remainingItems = $("#ssss li").sort((a, b) => {
    const textA = $(a).find('a').text().trim().toLowerCase();
    const textB = $(b).find('a').text().trim().toLowerCase();
    return textA.localeCompare(textB);
  });
  
  // Reattach the sorted items back to the dropdown list
  $("#ssss").empty().append($remainingItems);
});

Key Breakdowns of the Code: #

• Prevent Default Behavior: We use e.preventDefault() to stop the <a> tag from triggering a page reload/navigation.
• Duplicate Check: A quick check ensures we don't add the same color to the selected list multiple times.
• Move Item: appendTo() transfers the clicked <li> directly from the dropdown to the selected color container.
• Alphabetical Sort: We sort the remaining dropdown items by their color text (case-insensitive) using localeCompare() for reliable alphabetical ordering, then reinsert them into the dropdown list.

This implementation covers all your requested interactions, and keeps the UI clean and organized as users select colors.

内容的提问来源于stack exchange，提问作者Eksa Winata