如何将两个功能相同的选择html标签的两个JS组合在一起？

Question

我有两个选择html标签。每个选择选项html标签的值具有不同的数组。我想把两个‘`var’和两个Jquery结合起来，因为它们的功能是一样的，但是"id“不同。

该怎么做呢？有可能吗？

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);