Select2不显示所选选项的值

Question

我使用了 laravel api 的 ajax 请求。在此我选择一艘船，根据其配件出现类别和子类别，然后选择配件。以下是我的脚本，但我无法找到导致配件未显示的问题。 JavaScript 代码是：

$(document).ready(function () {
  // Initialize Select2 for accessory_discount class
  $(".accessory_discount").select2();

  var selectedAccessoryIds = []; // Array to store selected accessory IDs

  $("#boat-select").change(function () {
    var selectedBoats = $(this).val();
    var $accessorySelect = $("#accessory-select");

    // Clear the existing options and selected accessory IDs
    $accessorySelect.empty();
    $accessorySelect.append('<option value="">Select an accessory</option>');
    selectedAccessoryIds = [];

    if (selectedBoats.length > 0) {
      console.log("Selected Boats: ", selectedBoats);

      $.ajax({
        url: route("custom-boat-discounts.get-accessories"),
        type: "POST",
        data: { boats: selectedBoats },
        success: function (response) {
          console.log("Response: ", response);

          if (response.success) {
            var data = [];

            $.each(response.accessories, function (index, boat_cat) {
              var catGroup = {
                text: boat_cat.ltitle,
                children: [],
              };

              $.each(boat_cat.sub_categories, function (index, boat_sub_cat) {
                var subCatGroup = {
                  text: boat_sub_cat.ltitle,
                  children: [],
                };

                $.each(
                  boat_sub_cat.sub_sub_categories,
                  function (index, boat_sub_sub_cat) {
                    subCatGroup.children.push({
                      id: boat_sub_sub_cat.id,
                      text: boat_sub_sub_cat.ltitle,
                      cat: boat_cat.ltitle,
                      subCat: boat_sub_cat.ltitle,
                    });
                  }
                );

                catGroup.children.push(subCatGroup);
              });

              data.push(catGroup);
            });

            // Initialize Select2 with the new data
            $accessorySelect.select2({
              data: data,
              templateResult: formatAccessory,
              templateSelection: formatAccessorySelection,
              allowClear: true,
              multiple: false, // Allow single selection
            });

            // Trigger change event to update Select2 with new data
            $accessorySelect.trigger("change");

            // Add event listener for select and unselect events
            $accessorySelect.on(
              "select2:select select2:unselect",
              function (e) {
                selectedAccessoryIds = $(this).val() || [];
                console.log("Selected Accessory IDs:", selectedAccessoryIds);

                // Update hidden input field with selected IDs
                $("#selected-accessory-ids").val(
                  JSON.stringify(selectedAccessoryIds)
                );
              }
            );
          } else {
            console.error("Response success is false: " + response.message);
          }
        },
        error: function (xhr, status, error) {
          console.error("AJAX Error: ", status, error);
        },
      });

      function formatAccessory(accessory) {
        if (!accessory.id) {
          var $accessory = $("<span>" + accessory.text + "</span>");
          if (
            accessory.element &&
            $(accessory.element).parent().is("optgroup")
          ) {
            $accessory.addClass("ml-2");
          }
          return $accessory;
        }
        return $("<span>" + accessory.text + "</span>");
      }

      function formatAccessorySelection(accessory) {
        if (!accessory.id) {
          return accessory.text;
        }
        return (
          accessory.cat + " - " + accessory.subCat + " - " + accessory.text
        );
      }
    }
  });
});

我的服务器端逻辑是：

public function getAccessories(Request $request)
    {
        $boatIds = $request->input('boats', []);

        if (empty($boatIds)) {
            return response()->json(['success' => false, 'message' => 'No boats selected.']);
        }

        $accessories = [];
        foreach ($boatIds as $boatId) {
            $boat = $this->predefinedListRepository->findById($boatId);

            if (!$boat) {
                return response()->json(['success' => false, 'message' => "Boat with ID $boatId not found."]);
            }

            $boat_cats = $boat->childitems_display();

            foreach ($boat_cats as $boat_cat) {
                $boat_cat_data = [
                    'id' => $boat_cat->id,
                    'ltitle' => $boat_cat->ltitle,
                    'sub_categories' => []
                ];
            
                foreach ($boat_cat->childitems() as $boat_sub_cat) {
                    $boat_sub_cat_data = [
                        'id' => $boat_sub_cat->id,
                        'ltitle' => $boat_sub_cat->ltitle,
                        'sub_sub_categories' => []
                    ];
            
                    foreach ($boat_sub_cat->childitems() as $boat_sub_sub_cat) {
                        $boat_sub_sub_cat_data = [
                            'id' => $boat_sub_sub_cat->id,
                            'ltitle' => $boat_sub_sub_cat->ltitle,
                        ];
            
                        $boat_sub_cat_data['sub_sub_categories'][] = $boat_sub_sub_cat_data;
                    }
            
                    $boat_cat_data['sub_categories'][] = $boat_sub_cat_data;
                }
            
                $accessories[] = $boat_cat_data;
            }
            
        }

        return response()->json([
            'success' => true,
            'accessories' => $accessories,
        ]);
    }

我想要正确的选择，以便我可以保存所选的配件

Answer 1

如果所选选项未正确添加到基础元素或 Select2 未使用新数据正确初始化，则可能会出现此问题。