Javascript插件，用于从对象创建选择元素

问题描述

是否有任何插件，最好是香草插件，但jquery插件也可以工作，可以将JavaScript对象变成各自的select元素.

Is there any plugin, preferably vanilla but jquery plugins work too, that can turn a JavaScript object into respective select elements.

obj = {
    Ford: {
        1: "Focus",
        2: "Fiesta"
    },
    Toyota: {
        1: "Prius",
        2: "Avensis"
    }
}

AwesomePluginMagic(obj);

哪个应该给我

<select name="primary">
    <option value="0" selected>Ford</option>
    <option value="1">Toyota</option>

</select>

<select name="secondary">
    <option value="1">Focus</option>
    <option value="2">Fiesta</option>
    <option class="hidden" value="1">Prius</option>
    <option class="hidden" value="2">Avensis</option>
</select>

然后应听取更改并在相关的select元素中可视化适当的选项.

And should then listen for changes and visualize the appropriate options in the relevant select element.

免责声明:我不希望您为我编写一个函数，我要的是已经制作好的插件，但是如果您坚持要使用它.输入对象也可以是任何格式，我只是为示例制作了一个格式.

Disclaimer: I don't want you to write a function for me, I'm asking for a plugin already made, but if you insist I'll use it. Also the input object can be of any format, I just made up one for the example.

推荐答案

有关如何在不使用任何库的情况下实现此示例.

An example on how to implement this without any library.

(function() {
    'use strict';
    
    var obj = {
        Ford: {            
            1: "Focus",
            2: "Fiesta"            
        },
        Toyota: {            
            1: "Prius",
            2: "Avensis"            
        }
    };
    
    var manufacturers = Object.keys(obj);
    var selectedManufacturer = manufacturers[0];
    var models = hashTokeyValuePairArray(obj[selectedManufacturer]);
    var selectedModel = models[0];
    var selectedCar = { make: selectedManufacturer, model: selectedModel.value };

    bindManufacturer();
    bindModel();    
    bindSelectedCar();
    
    function hashTokeyValuePairArray(o) {
        var k = Object.keys(o);        
        return k.map(function(k) { return { key: k, value: o[k] }; });
    }
    
    function bindSelectedMake() {
        var el = document.getElementById("selectedMake");
        el.innerText = selectedManufacturer;
    }
    
    function bindSelectedModel() {
        var el = document.getElementById("selectedModel");
        el.innerText = selectedModel.value;
    }

    function bindSelectedCar() {
        bindSelectedMake();
        bindSelectedModel();
        
        selectedCar = { make: selectedManufacturer, model: selectedModel.value };
        console.log(selectedCar);
    }
    
    function bindManufacturer() {
        var el = document.getElementById("make");    
        var opts = manufacturers.map(function(m) { return "<option>" + m + "</option>"; });     
        el.innerHTML = opts.join('');        
        el.options.selectedIndex = 0;
        el.addEventListener('change', function() {
            selectedManufacturer = manufacturers[this.options.selectedIndex];
            models = hashTokeyValuePairArray(obj[selectedManufacturer]);
            selectedModel = models[0];
            bindModel(true);
            bindSelectedCar();
        });
    }
    
    function bindModel(skipEventBinding) {
        var el = document.getElementById("model");
        var opts = models.map(function(m) { return "<option value=\"" + m.key + "\">" + m.value + "</option>"; });
        el.innerHTML = opts.join('');
        el.options.selectedIndex = 0;
        
        if (!skipEventBinding) {
            el.addEventListener('change', function() {
                selectedModel = models[this.options.selectedIndex];
                bindSelectedCar();
            });
        }
    }
}());

#make, #model { width: 100px; margin-bottom:5px }

<label for="make">Make:</label> <select id="make"></select>
<label for="model">Model:</label> <select id="model">
</select>

<div>
    Selected Car: <span id="selectedMake"></span> <span id="selectedModel"></span>
</div>

这篇关于Javascript插件，用于从对象创建选择元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！