如何使用 jQuery 向上/向下移动多个选择选项

Question

我正在构建一个自定义下拉字段编辑器，并希望添加将所选选项向上或向下移动以及删除它们的功能。我主要实现了这一点，但出于某种原因，它一直将选项向上移动两次，而不是一次，并且不会向下移动选项。按预期删除作品。

我查看了以下 jQuery 文档，但似乎无法正常工作。我确定我做错了什么。

• https://api.jquery.com/prev/
• https://api.jquery.com/before/
• https://api.jquery.com/next/
• https://api.jquery.com/after/

div[class="my-4"]
    div[class="flex items-center"]
        select[name="event_form_field_dropdown_options" id="dropdown-options" required="required" class="w-full" multiple="multiple"]
    div[class="ml-2 flex flex-col gap-2"]
        button[type="button" class="" id="move-dropdown-options-up" title="Move Up"]
        svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 text-primary-blue-dark hover:text-primary-blue"
             path fill-rule="evenodd" d="M12 20.25a.75.75 0 01-.75-.75V6.31l-5.47 5.47a.75.75 0 01-1.06-1.06l6.75-6.75a.75.75 0 011.06 0l6.75 6.75a.75.75 0 11-1.06 1.06l-5.47-5.47V19.5a.75.75 0 01-.75.75z" clip-rule="evenodd"
        button[type="button" class="" id="move-dropdown-options-down" title="Move Down"]
            svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 text-primary-blue-dark hover:text-primary-blue"
                path fill-rule="evenodd" d="M12 2.25a.75.75 0 01.75.75v16.19l6.22-6.22a.75.75 0 111.06 1.06l-7.5 7.5a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 111.06-1.06l6.22 6.22V3a.75.75 0 01.75-.75z" clip-rule="evenodd"
        button[type="button" class="" id="remove-dropdown-options" title="Remove"]
            svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 text-red-600 hover:text-red-800"
                path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm3 10.5a.75.75 0 000-1.5H9a.75.75 0 000 1.5h6z" clip-rule="evenodd"

    // Add a new dropdown option
      var option = $('#new-dropdown-option').val();
      if (option != '') {
        $('#dropdown-options').append('<option value="' + option + '">' + option + '</option>');
        $('#new-dropdown-option').val('');
        $('#new-dropdown-option').focus();
      }
    });

    // Move the selected dropdown options up or down
    $('#move-dropdown-options-up').click(function() {
      $('#dropdown-options option:selected').each(function() {
        if ($("#dropdown-options option:selected").length > 1) {
          return; // don't allow moving multiple options at once
        }
        var option = $(this);
        console.log('selected', option.val());
        if(option.is(':first-child')) {
          console.log('next', $('#dropdown-options option:last-child').next().val());
          option.insertAfter($('#dropdown-options option:last-child').next());
        }
        else {
          console.log('prev', option.prev().val());
          option.insertBefore(option.prev());
        }
      });
    });
    $('#move-dropdown-options-down').click(function() {
      $('#dropdown-options option:selected').each(function() {
        if ($("#dropdown-options option:selected").length > 1) {
          return; // don't allow moving multiple options at once
        }
        var option = $(this);
        console.log('selected', option.val());
        if(option.is(':last-child')) {
          console.log('prev', $('#dropdown-options option:first-child').prev().val());
          option.insertBefore($('#dropdown-options option:first-child').prev());
        }
        else {
          console.log('next', option.next().val());
          option.insertAfter(option.next());
        }
      });
    });

    // Remove the selected dropdown options
    $('#remove-dropdown-options').click(function() {
      $('#dropdown-options option:selected').each(function() {
        $(this).remove();
      });
    });

我期待向上/向下动作将所选选项分别向上移动 1 或向下移动 1。删除操作按预期工作。

CodePen：https://codepen.io/codelogix/pen/gOdmXbR