Question

我有两个选择html标签。每个选择选项html标记的值具有不同的数组。我想把两个`var selectBox和两个Jquery结合起来，因为函数是相同的，但是有不同的＆＃34; id＆＃34;。

怎么做？有可能吗？

HTML：

<select id="textlist">
    <option value="" selected><option>
</select>
<select id="placelist">
    <option value="" selected><option>
</select>

选择html标签1：

jQuery(document).ready(function($){
    jQuery('#textlist').change(function(){
    jQuery('.texts').hide();
    jQuery('#' + jQuery(this).val()).show();
    });
});

var options = [
    { "text" : "Text 1", "value" : "Text1" },
    { "text" : "Text 2", "value" : "Text2" }
];

var selectBox = document.getElementById('textlist');
for(var i = 0, l = options.length; i < l; i++){
    var option = options[i];
    selectBox.options.add(new Option(option.text, option.value, option.selected));
}

jQuery("#placelist").html(jQuery("#placelist option").sort(function (a, b) {
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
}))

选择html标签2：

jQuery(document).ready(function($){
    jQuery('#placelist').change(function(){
    jQuery('.places').hide();
    jQuery('#' + jQuery(this).val()).show();
    });
});

var options = [
    { "text" : "Place 1", "value" : "Place1" },
    { "text" : "Place 2", "value" : "Place2" }
];

var selectBox = document.getElementById('placelist');
for(var i = 0, l = options.length; i < l; i++){
    var option = options[i];
    selectBox.options.add(new Option(option.text, option.value, option.selected));
}

jQuery("#placelist").html(jQuery("#placelist option").sort(function (a, b) {
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
}))

Answer 1

尝试创建一个重用代码的函数，如下所示：

fucntion addOptions(id, className, options){
    jQuery(document).ready(function($){
        jQuery('#'+id).change(function(){
        jQuery('.'+className).hide();
        jQuery('#' + jQuery(this).val()).show();
        });
    });

    var selectBox = document.getElementById(id);
    for(var i = 0, l = options.length; i < l; i++){
        var option = options[i];
        selectBox.options.add(new Option(option.text, option.value, option.selected));
    }

    jQuery("#"+id).html(jQuery("#"+id+" option").sort(function (a, b) {
        return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
    }))
}

var placeOptions = [
    { "text" : "Text 1", "value" : "Text1" },
    { "text" : "Text 2", "value" : "Text2" }
];

addOptions('placelist', 'places', placeOptions);

var textOptions = [
    { "text" : "Place 1", "value" : "Place1" },
    { "text" : "Place 2", "value" : "Place2" }
];

addOptions('textlist', 'texts', textOptions);

如何结合两个具有相同功能的两个选择html标签的JS？

1 个答案: