Question

是否有插件，最好是vanilla，但jquery插件也可以，它可以将JavaScript对象转换为相应的选择元素。

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元素中可视化相应的选项。

免责声明：我不希望你为我写一个函数，我要求已经制作了一个插件，但是如果你坚持我会使用它。此外，输入对象可以是任何格式，我只是为示例编写了一个。

Answer 1

为辅助选项添加了data-car值，以便他们引用主要select。还为主要添加了change侦听器，根据所选项目更改了辅助选项的.hidden。

免责声明：如果obj具有不同的格式需要修改，它将使用当前格式。我不认为这是可能的，除非为给定对象的格式设置了一些限制。

function AwesomePluginMagic(obj) {

    var prm = document.createElement('select');
    var scnd = document.createElement('select');
    prm.name = "primary";
    scnd.name = "secondary";

    var i = 1;
    for(var itm in obj) {
        var popt = document.createElement('option');
        popt.value = i;
        popt.innerHTML = itm;
        prm.appendChild(popt);
        var j = 1;
        for(var sub in obj[itm]) {
            var sopt = document.createElement('option');
            sopt.setAttribute('data-car', i);
            sopt.value = j;
            sopt.innerHTML = obj[itm][sub];
            if(i > 1)
                sopt.className = "hidden";
            scnd.appendChild(sopt);
            j++;
        }
        i++;
    }
    var dv = document.getElementById('dv');
    dv.appendChild(prm);
    dv.appendChild(scnd);
    prm.addEventListener('change', function() {
        var selected = false;
        var o = scnd.options;
        for(var i = 0; i < o.length; i++) {
            if(o[i].getAttribute('data-car') == this.value) {
                o[i].className =  "";
                if(!selected) {
                    o[i].setAttribute('selected', 'selected');
                    selected = true;
                }
            }
            else
                o[i].className = "hidden";
        }
    });
}

jsfiddle DEMO

Answer 2

关于如何在没有任何库的情况下实现此目的的示例。

(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>

Answer 3

JS是面向对象的，为什么不使用对象，如下所示：

＆＃13;

var // Data
    cars = {
        Ford: {
            1: "Focus",
            2: "Fiesta",
        },
        Toyota: {
            1: "Prius",
            2: "Avensis"
        }
    },
    // The AwesomePlugin
    selectPair = Object.create({}, {
        update: {value: function (select, obj) {
            var keys = Object.keys(obj).sort(function (a, b) {return a.localeCompare(b);}),
                n, eN, option, element = this[select] || document.createElement('select');
            element.length = 0;
            for (n = 0, eN = keys.length; n < eN; n ++) {
                option = document.createElement('option');
                option.text = (typeof obj[keys[n]] === 'object') ? keys[n] : obj[keys[n]];
                option.value = (typeof obj[keys[n]] === 'object') ? keys[n] : obj[keys[n]];
                element.appendChild(option);
            }
            return element;
        }},
        init: {value: function (obj, target) {
            var that = this, keys = Object.keys(obj).sort(function (a, b) {return a.localeCompare(b);});
            this.host = target.appendChild(this.update('host', obj));
            this.child = target.appendChild(this.update('child', obj[keys[0]]));
            this.host.addEventListener('change', function () {
                that.update('child', obj[that.host.value]);
            });
            return this;
        }}
     });
// Usage
Object.create(selectPair).init(cars, document.body);

＆＃13;

原型是可重复使用的，你可以创建多个＆＃34;选择对＆＃34;只需使用selectPair原型创建一个新对象，并传递所需的数据对象和元素以附加select元素。

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

3 个答案: