jQuery Select2子項未顯示為選中狀態

Question

我在數據中有一個帶有“ children”屬性的select2框，它按預期方式呈現。 但是在編輯屏幕中，當我們選擇子元素時，其父元素會保留在下拉列表中。 例如，當我們在添加表單中選擇“ Live Band”時，但編輯表單顯示為“ Entertainment”。 請找到我正在使用的數據格式和源代碼。 請幫助我解決此問題。

數據

[
    {
        "id": "12",
        "text": "Personal Chef",
        "parent": "0",
        "order": 0
    },
    {
        "id": "11",
        "text": "Entertainment",
        "parent": "0",
        "order": 1,
        "children": [
            {
                "id": "37",
                "text": "DJ’s",
                "parent": "11",
                "order": 0
            },
            {
                "id": "38",
                "text": "Live Band",
                "parent": "11",
                "order": 1
            },
            {
                "id": "36",
                "text": "Clowns - Kids parties",
                "parent": "11",
                "order": 2
            }
        ]
    },
    {
        "id": "10",
        "text": "Motorcycle Repair",
        "parent": "0",
        "order": 2
    }
]

源代碼：

$(".search-result-box").select2({
    placeholder: "eg: 1967 Stingray Mechanic",
    multiple: false,
    width: 225,
    selectOnBlur: true,
    data: data
});

$(".search-result-box").select2('val', 38); // Tried select2('val', "38") also.

Answer 1

我只是在plunker中嘗試了select2示例，它按您的期望工作。

請看看，如果您還有其他需要，請告訴我。 還請提及您的jquery，以及select2版本。

HTML：

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@1.7.1" data-semver="1.7.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <link data-require="select2@*" data-semver="3.5.1" rel="stylesheet" href="//cdn.jsdelivr.net/select2/3.4.5/select2.css" />
  <script data-require="select2@*" data-semver="3.5.1" src="//cdn.jsdelivr.net/select2/3.5.1/select2.min.js"></script>

  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>

  <input type="hidden" class="search-result-box" />

</body>

</html>

JavaScript文件：

$(function() {

   $(".search-result-box").select2({
     placeholder: "eg: 1967 Stingray Mechanic",
     multiple: false,
     width: 225,
     selectOnBlur: true,
     data: data
   });

  $(".search-result-box").select2('val', 38); // Tried select2('val', "38") also.

});

jQuery Select2子項未顯示為選中狀態

問題描述

1 個解決方案

解決方案1
2 已采納 2014-11-24 06:12:51

jQuery Select2子項未顯示為選中狀態

問題描述

1 個解決方案

解決方案1 2 已采納 2014-11-24 06:12:51

解決方案1
2 已采納 2014-11-24 06:12:51