Nuclear Pumpkin Mocha


    1.1.14 • Public • Published

    Hierarchy Select jQuery Plugin for Twitter Bootstrap

    a link to the original project for guidance


    • a bundeling system like webpack
    • jQuery
    • bootstrap


    npm install bootstrap@3 jquery@3 @cartok/hierarchy-select



    You should only use this module inside of a build environment (ES6 module).

    Import and apply the plugin to jQuery

    import "jquery"
    import "bootstrap"
    import hierarchySelect from "@cartok/hierarchy-select"
    import "bootstrap/dist/css/bootstrap.css"
    import "@cartok/hierarchy-select/build/hierarchy-select.css"

    Example usage

     * create the base html code and append it somewhere.
     * @unwritten-feature: the html could be provided later from inside the plugin
    const html = new NodeTemplate(`
        <div class="btn-group hierarchy-select" data-resize="auto">
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-ref="button">
                <span class="selected-label pull-left" data-ref="text">&nbsp;</span>
                <span class="caret"></span>
            <div class="dropdown-menu open">
                <div class="hs-searchbox">
                    <input type="text" class="form-control" autocomplete="off">
                <ul data-ref="list" class="dropdown-menu inner" role="menu"></ul>
            <input class="hidden hidden-field" readonly="readonly" type="text"/>
     * Use HierarchySelect on the html and pass in options and a function
     * that creates the entries of the select view.
     * If you want the select to have a default selection on DOM-load you need
     * a function that creates entries with one of them having the 'data-default-selected' attribute.
     * But you can just take out the whole function code and execute it afterwards.
        hierarchy: false,
        togglePosition: false,
        keepFocused: false,
    }, () => {
        // id attributes are optional and will be autofilled in the updateSelect() function.
        const data = [{
            id: 0,
            text: "Label A"
            id: 1,
            text: "Label B"
            id: 3,
            text: "Long John Silver!"
            id: 4,
            text: "This is the longest label in the world!"
            id: 5,
            text: "Another long sentence containing the word 'world'!"
        ;(function updateSelect(entries){
            // remove all entries from select.
            html.refs.list.innerHTML = ""
            // check if every entrie-object has an id, else create it.
            entries = entries.every(l => instanceof Number)
            ? entries
            :, idx) => Object.assign(l, { id: idx }))
            // create html node from entries-array.
            const entriesFragment = document.createDocumentFragment()
            entries.forEach((e, idx) => {
                let entry = undefined
                if(idx === 0){
                    // the first node gets selected by the plugin via data attribute.
                    entry = new NodeTemplate(`
                        <li data-value="${}" data-default-selected>
                            <a href="#">${e.text}</a>
                } else {
                    entry = new NodeTemplate(`
                        <li data-value="${}">
                            <a href="#">${e.text}</a>

    Usage additions

    How-to react on selection change?

    $(html.root).on("change", (e, data) => {
        // The change event is triggered manually by the plugin through jQuery.
        // But it will also be triggered natively.
        // Only if the event was triggered by the plugin, you will get the text of the selection.
        if(data !== undefined){
            console.log("You can use the selected dropdown text and id on selection like this.")

    How-to open the dropdown on shortcut?

    $(window).on("keydown", (e) => {
            if(e.key.toLowerCase() === "l"){

    How to develop

    Start the http-server for testing the example page for CORS. Navigate to the examples folder and open the html file.
    Use a browser that supports async ES6 module loading via script tag. compability list
    Suggestion: Use Chrome >= 62

    node node_modules/.bin/http-server


    npm i @cartok/hierarchy-select

    DownloadsWeekly Downloads






    Unpacked Size

    27.1 kB

    Total Files


    Last publish


    • cartok