将select2与JSON文件数据

时间:2017-04-15 11:59:52

标签: javascript json select2

我有一个.JSON文件,其中包含一些课程,其中包含课程。每个主题都有一个代码和一个名称属性。其中一些课程的主题是数组中的代码和名称对。

{
    "bio" : {
        "name" : "Biologi",
        "courses" : {
            "bio01" : "Biologi 1",
            "bio02" : "Biologi 2",
            "bit0" : "Bioteknik"
        }
    },
    "eng" : {
        "name" : "Engelska",
        "courses" : {
            "eng05" : "Engelska 5",
            "eng06" : "Engelska 6",
            "eng07" : "Engelska 7"
        }
    },
    "sve" : {
        "name" : "Svenska",
        "courses" : {
            "sve01" : "Svenska 1",
            "sve02" : "Svenska 2",
            "sve03" : "Svenska 3",
            "lit0" : "Litteratur",
            "ret0" : "Retorik",
            "skr0" : "Skrivande"
        }
    }
}

我希望在这样的select2选择输入中显示,给出一个普通选择框的例子:

enter image description here

用户应该既可以选择整个主题,也可以通过选择课程来指定自己。

select的选项值应该是对象的代码。受试者使用他们自己的三字母代码,但课程首先从他们的主题代码开始,并添加他们自己的代码。这是上面选择的示例代码:

<label for="subject">Ämne eller kurs</label>
<select name="subject" id="subject">
    <option value="bio">Biologi</option>
    <option value="biobio01">Biologi 1</option>
    <option value="biobio02">Biologi 2</option>
    <option value="biobit0">Bioteknik</option>
    <option value="eng">Engelska</option>
    <option value="engeng05">Engelska 5</option>
    <option value="engeng06">Engelska 6</option>
    <option value="engeng07">Engelska 7</option>
    <option value="sve">Svenska</option>
    <option value="svesve01">Svenska 1</option>
    <option value="svesve02">Svenska 2</option>
    <option value="svesve03">Svenska 3</option>
</select>

如何使用select2选择输入来使用.JSON文件中的数据?是通过AJAX请求,然后,我将如何做到这一点?

$("#subject").select2({
    placeholder: "Välj ämne eller kurs"
});

enter image description here

0 个答案:

没有答案