使用不同的HTML ID多次调用Javascript函数

我有这个密码

Javascript

 <script src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="jquery.selectbox-0.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function(e) {
        $("#nat").selectbox();

        $("#dep").selectbox();
        $("#des").selectbox();
    });
           </script>        

$（文档）.ready（函数（e）{
$（“#nat”）。选择框（）；
$（“#dep”）。选择框（）；
$（“#des”）。选择框（）；
});

jquery.selectbox-0.2.min.js

(function ($, undefined) {
var PROP_NAME = 'selectbox',
    FALSE = false,
    TRUE = true;
function Selectbox() {
    this._state = [];
    this._defaults = { // Global defaults for all the select box instances
        classHolder: "sbHolder",
        classHolderDisabled: "sbHolderDisabled",
        classSelector: "sbSelector",
        classOptions: "sbOptions",
        classGroup: "sbGroup",
        classSub: "sbSub",
        classDisabled: "sbDisabled",
        classToggleOpen: "sbToggleOpen",
        classToggle: "sbToggle",
        classFocus: "sbFocus",
        speed: 200,
        effect: "slide", // "slide" or "fade"
        onChange: null, //Define a callback function when the selectbox is changed
        onOpen: null, //Define a callback function when the selectbox is open
        onClose: null //Define a callback function when the selectbox is closed
    };
}

$.extend(Selectbox.prototype, {
    /**
     * Is the first field in a jQuery collection open as a selectbox
     * 
     * @param {Object} target
     * @return {Boolean}
     */
    _isOpenSelectbox: function (target) {
        if (!target) {
            return FALSE;
        }
        var inst = this._getInst(target);
        return inst.isOpen;
    },
    /**
     * Is the first field in a jQuery collection disabled as a selectbox
     * 
     * @param {HTMLElement} target
     * @return {Boolean}
     */
    _isDisabledSelectbox: function (target) {
        if (!target) {
            return FALSE;
        }
        var inst = this._getInst(target);
        return inst.isDisabled;
    },
    /**
     * Attach the select box to a jQuery selection.
     * 
     * @param {HTMLElement} target
     * @param {Object} settings
     */
    _attachSelectbox: function (target, settings) {
        if (this._getInst(target)) {
            return FALSE;
        }
        var $target = $(target),
            self = this,
            inst = self._newInst($target),
            sbHolder, sbSelector, sbToggle, sbOptions,
            s = FALSE, optGroup = $target.find("optgroup"), opts = $target.find("option"), olen = opts.length;

        $target.attr("sb", inst.uid);

        $.extend(inst.settings, self._defaults, settings);
        self._state[inst.uid] = FALSE;
        $target.hide();

        function closeOthers() {
            var key, sel,
                uid = this.attr("id").split("_")[1];
            for (key in self._state) {
                if (key !== uid) {
                    if (self._state.hasOwnProperty(key)) {
                        sel = $("select[sb='" + key + "']")[0];
                        if (sel) {
                            self._closeSelectbox(sel);
                        }
                    }
                }
            }
        }

        sbHolder = $("<div>", {
            "id": "sbHolder_" + inst.uid,
            "class": inst.settings.classHolder,
            "tabindex": $target.attr("tabindex")
        });

        sbSelector = $("<a>", {
            "id": "sbSelector_" + inst.uid,
            "href": "#",
            "class": inst.settings.classSelector,
            "click": function (e) {
                e.preventDefault();
                closeOthers.apply($(this), []);
                var uid = $(this).attr("id").split("_")[1];
                if (self._state[uid]) {
                    self._closeSelectbox(target);
                } else {
                    self._openSelectbox(target);
                }
            }
        });

        sbToggle = $("<a>", {
            "id": "sbToggle_" + inst.uid,
            "href": "#",
            "class": inst.settings.classToggle,
            "click": function (e) {
                e.preventDefault();
                closeOthers.apply($(this), []);
                var uid = $(this).attr("id").split("_")[1];
                if (self._state[uid]) {
                    self._closeSelectbox(target);
                } else {
                    self._openSelectbox(target);
                }
            }
        });
        sbToggle.appendTo(sbHolder);

        sbOptions = $("<ul>", {
            "id": "sbOptions_" + inst.uid,
            "class": inst.settings.classOptions,
            "css": {
                "display": "none"
            }
        });

        $target.children().each(function(i) {
            var that = $(this), li, config = {};
            if (that.is("option")) {
                getOptions(that);
            } else if (that.is("optgroup")) {
                li = $("<li>");
                $("<span>", {
                    "text": that.attr("label")
                }).addClass(inst.settings.classGroup).appendTo(li);
                li.appendTo(sbOptions);
                if (that.is(":disabled")) {
                    config.disabled = true;
                }
                config.sub = true;
                getOptions(that.find("option"), config);
            }
        });

        function getOptions () {
            var sub = arguments[1] && arguments[1].sub ? true : false,
                disabled = arguments[1] && arguments[1].disabled ? true : false;
            arguments[0].each(function (i) {
                var that = $(this),
                    li = $("<li>"),
                    child;
                if (that.is(":selected")) {
                    sbSelector.text(that.text());
                    s = TRUE;
                }
                if (i === olen - 1) {
                    li.addClass("last");
                }
                if (!that.is(":disabled") && !disabled) {
                    child = $("<a>", {
                        "href": "#" + that.val(),
                        "rel": that.val()
                    }).text(that.text()).bind("click.sb", function (e) {
                        if (e && e.preventDefault) {
                            e.preventDefault();
                        }
                        var t = sbToggle,
                            $this = $(this),
                            uid = t.attr("id").split("_")[1];
                        self._changeSelectbox(target, $this.attr("rel"), $this.text());
                        self._closeSelectbox(target);
                    }).bind("mouseover.sb", function () {
                        var $this = $(this);
                        $this.parent().siblings().find("a").removeClass(inst.settings.classFocus);
                        $this.addClass(inst.settings.classFocus);
                    }).bind("mouseout.sb", function () {
                        $(this).removeClass(inst.settings.classFocus);
                    });
                    if (sub) {
                        child.addClass(inst.settings.classSub);
                    }
                    if (that.is(":selected")) {
                        child.addClass(inst.settings.classFocus);
                    }
                    child.appendTo(li);
                } else {
                    child = $("<span>", {
                        "text": that.text()
                    }).addClass(inst.settings.classDisabled);
                    if (sub) {
                        child.addClass(inst.settings.classSub);
                    }
                    child.appendTo(li);
                }
                li.appendTo(sbOptions);
            });
        }

        if (!s) {
            sbSelector.text(opts.first().text());
        }

        $.data(target, PROP_NAME, inst);

        sbHolder.data("uid", inst.uid).bind("keydown.sb", function (e) {
            var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0,
                $this = $(this),
                uid = $this.data("uid"),
                inst = $this.siblings("select[sb='"+uid+"']").data(PROP_NAME),
                trgt = $this.siblings(["select[sb='", uid, "']"].join("")).get(0),
                $f = $this.find("ul").find("a." + inst.settings.classFocus);
            switch (key) {
                case 37: //Arrow Left
                case 38: //Arrow Up
                    if ($f.length > 0) {
                        var $next;
                        $("a", $this).removeClass(inst.settings.classFocus);
                        $next = $f.parent().prevAll("li:has(a)").eq(0).find("a");
                        if ($next.length > 0) {
                            $next.addClass(inst.settings.classFocus).focus();
                            $("#sbSelector_" + uid).text($next.text());
                        }
                    }
                    break;
                case 39: //Arrow Right
                case 40: //Arrow Down
                    var $next;
                    $("a", $this).removeClass(inst.settings.classFocus);
                    if ($f.length > 0) {
                        $next = $f.parent().nextAll("li:has(a)").eq(0).find("a");
                    } else {
                        $next = $this.find("ul").find("a").eq(0);
                    }
                    if ($next.length > 0) {
                        $next.addClass(inst.settings.classFocus).focus();
                        $("#sbSelector_" + uid).text($next.text());
                    }
                    break;              
                case 13: //Enter
                    if ($f.length > 0) {
                        self._changeSelectbox(trgt, $f.attr("rel"), $f.text());
                    }
                    self._closeSelectbox(trgt);
                    break;
                case 9: //Tab
                    if (trgt) {
                        var inst = self._getInst(trgt);
                        if (inst/* && inst.isOpen*/) {
                            if ($f.length > 0) {
                                self._changeSelectbox(trgt, $f.attr("rel"), $f.text());
                            }
                            self._closeSelectbox(trgt);
                        }
                    }
                    var i = parseInt($this.attr("tabindex"), 10);
                    if (!e.shiftKey) {
                        i++;
                    } else {
                        i--;
                    }
                    $("*[tabindex='" + i + "']").focus();
                    break;
                case 27: //Escape
                    self._closeSelectbox(trgt);
                    break;
            }
            e.stopPropagation();
            return false;
        }).delegate("a", "mouseover", function (e) {
            $(this).addClass(inst.settings.classFocus);
        }).delegate("a", "mouseout", function (e) {
            $(this).removeClass(inst.settings.classFocus);  
        });

        sbSelector.appendTo(sbHolder);
        sbOptions.appendTo(sbHolder);           
        sbHolder.insertAfter($target);

        $("html").live('mousedown', function(e) {
            e.stopPropagation();          
            $("select").selectbox('close'); 
        });
        $([".", inst.settings.classHolder, ", .", inst.settings.classSelector].join("")).mousedown(function(e) {    
            e.stopPropagation();
        });
    },
    /**
     * Remove the selectbox functionality completely. This will return the element back to its pre-init state.
     * 
     * @param {HTMLElement} target
     */
    _detachSelectbox: function (target) {
        var inst = this._getInst(target);
        if (!inst) {
            return FALSE;
        }
        $("#sbHolder_" + inst.uid).remove();
        $.data(target, PROP_NAME, null);
        $(target).show();           
    },
    /**
     * Change selected attribute of the selectbox.
     * 
     * @param {HTMLElement} target
     * @param {String} value
     * @param {String} text
     */
    _changeSelectbox: function (target, value, text) {
        var onChange,
            inst = this._getInst(target);
        if (inst) {
            onChange = this._get(inst, 'onChange');
            $("#sbSelector_" + inst.uid).text(text);
        }
        value = value.replace(/\'/g, "\\'");
        $(target).find("option[value='" + value + "']").attr("selected", TRUE);
        if (inst && onChange) {
            onChange.apply((inst.input ? inst.input[0] : null), [value, inst]);
        } else if (inst && inst.input) {
            inst.input.trigger('change');
        }
    },
    /**
     * Enable the selectbox.
     * 
     * @param {HTMLElement} target
     */
    _enableSelectbox: function (target) {
        var inst = this._getInst(target);
        if (!inst || !inst.isDisabled) {
            return FALSE;
        }
        $("#sbHolder_" + inst.uid).removeClass(inst.settings.classHolderDisabled);
        inst.isDisabled = FALSE;
        $.data(target, PROP_NAME, inst);
    },
    /**
     * Disable the selectbox.
     * 
     * @param {HTMLElement} target
     */
    _disableSelectbox: function (target) {
        var inst = this._getInst(target);
        if (!inst || inst.isDisabled) {
            return FALSE;
        }
        $("#sbHolder_" + inst.uid).addClass(inst.settings.classHolderDisabled);
        inst.isDisabled = TRUE;
        $.data(target, PROP_NAME, inst);
    },
    /**
     * Get or set any selectbox option. If no value is specified, will act as a getter.
     * 
     * @param {HTMLElement} target
     * @param {String} name
     * @param {Object} value
     */
    _optionSelectbox: function (target, name, value) {
        var inst = this._getInst(target);
        if (!inst) {
            return FALSE;
        }
        //TODO check name
        inst[name] = value;
        $.data(target, PROP_NAME, inst);
    },
    /**
     * Call up attached selectbox
     * 
     * @param {HTMLElement} target
     */
    _openSelectbox: function (target) {
        var inst = this._getInst(target);
        //if (!inst || this._state[inst.uid] || inst.isDisabled) {
        if (!inst || inst.isOpen || inst.isDisabled) {
            return;
        }
        var el = $("#sbOptions_" + inst.uid),
            viewportHeight = parseInt($(window).height(), 10),
            offset = $("#sbHolder_" + inst.uid).offset(),
            scrollTop = $(window).scrollTop(),
            height = el.prev().height(),
            diff = viewportHeight - (offset.top - scrollTop) - height / 2,
            onOpen = this._get(inst, 'onOpen');
        el.css({
            "top": height + "px",
            "maxHeight": (diff - height) + "px"
        });
        inst.settings.effect === "fade" ? el.fadeIn(inst.settings.speed) : el.slideDown(inst.settings.speed);
        $("#sbToggle_" + inst.uid).addClass(inst.settings.classToggleOpen);
        this._state[inst.uid] = TRUE;
        inst.isOpen = TRUE;
        if (onOpen) {
            onOpen.apply((inst.input ? inst.input[0] : null), [inst]);
        }
        $.data(target, PROP_NAME, inst);
    },
    /**
     * Close opened selectbox
     * 
     * @param {HTMLElement} target
     */
    _closeSelectbox: function (target) {
        var inst = this._getInst(target);
        //if (!inst || !this._state[inst.uid]) {
        if (!inst || !inst.isOpen) {
            return;
        }
        var onClose = this._get(inst, 'onClose');
        inst.settings.effect === "fade" ? $("#sbOptions_" + inst.uid).fadeOut(inst.settings.speed) : $("#sbOptions_" + inst.uid).slideUp(inst.settings.speed);
        $("#sbToggle_" + inst.uid).removeClass(inst.settings.classToggleOpen);
        this._state[inst.uid] = FALSE;
        inst.isOpen = FALSE;
        if (onClose) {
            onClose.apply((inst.input ? inst.input[0] : null), [inst]);
        }
        $.data(target, PROP_NAME, inst);
    },
    /**
     * Create a new instance object
     * 
     * @param {HTMLElement} target
     * @return {Object}
     */
    _newInst: function(target) {
        var id = target[0].id.replace(/([^A-Za-z0-9_-])/g, '\\\\$1');
        return {
            id: id, 
            input: target, 
            uid: Math.floor(Math.random() * 99999999),
            isOpen: FALSE,
            isDisabled: FALSE,
            settings: {}
        }; 
    },
    /**
     * Retrieve the instance data for the target control.
     * 
     * @param {HTMLElement} target
     * @return {Object} - the associated instance data
     * @throws error if a jQuery problem getting data
     */
    _getInst: function(target) {
        try {
            return $.data(target, PROP_NAME);
        }
        catch (err) {
            throw 'Missing instance data for this selectbox';
        }
    },
    /**
     * Get a setting value, defaulting if necessary
     * 
     * @param {Object} inst
     * @param {String} name
     * @return {Mixed}
     */
    _get: function(inst, name) {
        return inst.settings[name] !== undefined ? inst.settings[name] : this._defaults[name];
    }
});

/**
 * Invoke the selectbox functionality.
 * 
 * @param {Object|String} options
 * @return {Object}
 */
$.fn.selectbox = function (options) {

    var otherArgs = Array.prototype.slice.call(arguments, 1);
    if (typeof options == 'string' && options == 'isDisabled') {
        return $.selectbox['_' + options + 'Selectbox'].apply($.selectbox, [this[0]].concat(otherArgs));
    }

    if (options == 'option' && arguments.length == 2 && typeof arguments[1] == 'string') {
        return $.selectbox['_' + options + 'Selectbox'].apply($.selectbox, [this[0]].concat(otherArgs));
    }

    return this.each(function() {
        typeof options == 'string' ?
            $.selectbox['_' + options + 'Selectbox'].apply($.selectbox, [this].concat(otherArgs)) :
            $.selectbox._attachSelectbox(this, options);
    });
};

$.selectbox = new Selectbox(); // singleton instance
$.selectbox.version = "0.2";
})(jQuery);

（函数（$，未定义）{
变量PROP_NAME='selectbox'，
假=假，
真=真；
函数Selectbox（）{
本州=[]；
此.\u defaults={//所有选择框实例的全局默认值
类持有者：“sbHolder”，
classHolderDisabled：“sbHolderDisabled”，
类选择器：“sbSelector”，
classOptions:“sbOptions”，
类组：“sbGroup”，
classSub:“sbSub”，
classDisabled:“sbDisabled”，
classToggleOpen:“sbToggleOpen”，
类切换：“sbToggle”，
classFocus:“sbFocus”，
速度:200,，
效果：“幻灯片”、“幻灯片”或“淡入淡出”
onChange:null，//更改selectbox时定义回调函数
onOpen:null，//在选择框打开时定义回调函数
onClose:null//在selectbox关闭时定义回调函数
};
}
$.extend（Selectbox.prototype{
/**
*jQuery集合中的第一个字段是否作为selectbox打开
* 
*@param{Object}目标
*@return{Boolean}
*/
_等密度选择框：功能（目标）{
如果（！目标）{
返回FALSE；
}
var inst=此。_getInst（目标）；
返回仪表等参；
},
/**
*jQuery集合中的第一个字段是否已禁用为selectbox
* 
*@param{HTMLElement}目标
*@return{Boolean}
*/
_isDisabledSelectbox:功能（目标）{
如果（！目标）{
返回FALSE；
}
var inst=此。_getInst（目标）；
返回指令被禁用；
},
/**
*将选择框附加到jQuery选择。
* 
*@param{HTMLElement}目标
*@param{Object}设置
*/
_附件选择框：功能（目标、设置）{
如果（这是（目标））{
返回FALSE；
}
变量$target=$（目标），
self=这个，
inst=自我更新（$target），
sbHolder、sbSelector、sbToggle、sbOptions、，
s=FALSE，optGroup=$target.find（“optGroup”），opts=$target.find（“option”），olen=opts.length；
$target.attr（“sb”，inst.uid）；
$.extend（inst.settings，self.\u默认值，settings）；
自身状态[inst.uid]=假；
$target.hide（）；
函数closeOthers（）{
var键，sel，
uid=this.attr（“id”）.split（“”）[1]；
for（输入自身状态）{
如果（键！==uid）{
if（self.\u state.hasOwnProperty（键））{
sel=$（“选择[sb='”+键+“]”）[0]；
如果（sel）{
self.\u关闭选择框（sel）；
}
}
}
}
}
sbHolder=$（“”{
“id”：“SBU”+仪表uid，
“类”：inst.settings.classHolder，
“tabindex”：$target.attr（“tabindex”）
});
sbSelector=$（“”{
“id”：“sbr”+inst.uid，
“href”：“#”，
“类”：inst.settings.classSelector，
“点击”：功能（e）{
e、 预防默认值（）；
关闭其他。应用（$（此），[]）；
var uid=$（this.attr（“id”）.split（“”）[1]；
如果（自身状态[uid]）{
self.\u关闭选择框（目标）；
}否则{
self.\u打开选择框（目标）；
}
}
});
sbToggle=$（“”{
“id”：“sbr”+inst.uid，
“href”：“#”，
“类”：inst.settings.classToggle，
“点击”：功能（e）{
e、 预防默认值（）；
关闭其他。应用（$（此），[]）；
var uid=$（this.attr（“id”）.split（“”）[1]；
如果（自身状态[uid]）{
self.\u关闭选择框（目标）；
}否则{
self.\u打开选择框（目标）；
}
}
});
sbToggle.appendTo（sbHolder）；
sbOptions=$（“
”{
“id”：“sbOptions_uu”+inst.uid，
“类”：inst.settings.classOptions，
“css”：{
“显示”：“无”
}
});
$target.children（）.each（函数（i）{
var that=$（this），li，config={}；
如果（即“选择权”）{
获取选项（该选项）；
}else if（即“optgroup”））{
li=$（“
”）；
$("", {
“文本”：即.attr（“标签”）
}).addClass（inst.settings.classGroup）.appendTo（li）；
li.附录（sbOptions）；
如果（即（“：禁用”））{
config.disabled=true；
}
config.sub=true；
getOptions（即.find（“option”），config）；
}
});
函数getOptions（）{
var sub=参数[1]&&arguments[1]。sub？true:false，
disabled=参数[1]&&arguments[1]。disabled？true:false；
参数[0]。每个（函数（i）{
var that=$（此），
li=$（“
”），
小孩
如果（即（“：选定”））{
sbSelector.text（that.text（））；
s=真；
}
如果（i==olen-1）{
li.addClass（“最后一次”）；
}
如果（！that.is（“：disabled”）&&！disabled）{
子项=$（“”{
“href”：“#”+that.val（），
“rel”：that.val（）
 <select name="des" id="des" required> <--options--> </select>
 <select name="dep" id="dep" required> <--options--> </select>
 <select name="nat" id="nat" required> <--options--> </select>

$('select').selectbox();

$('#nat', '#dep', '#des').selectbox();

$('.somesharedclassname').selectbox();