实现select组件的选择输入过滤作用的js代码如下：
*其中//**之间的部分显示的是在没有选择输入过滤功能的代码上加入的功能代码
"+value+" ").appendTo(wrapper.children("ol"));
var inputSelect = wrapper.children("input");
selectOption.css({
padding: "3px",textAlign: "left",cursor: "pointer"
}).hover(
function(){
selectOption.css({backgroundColor: "#eee"});
},function(){
selectOption.css({backgroundColor: "#fff"});
});
//bind click on this option
selectOption.click(function(){
inputSelect.val(selectOption.text());
inputSelect.trigger("change");
});
}
**
/
/**
- @description This plugin allows you to make a select Box editable like a text Box while keeping it's select-option features
- @description no stylesheets or images are required to run the plugin
- @version 0.0.1
- @author Martin Mende
- @license Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0)
- @license For comercial use please contact me: martin.mende(at)aristech.de
- @requires jQuery 1.9+
- @class editableSelect
- @memberOf jQuery.fn
- @example
- var selectBox = $("select").editableSelect();
- selectBox.addOption("I am dynamically added");
*/
(function ( $ ) {
$.fn.editableSelect = function() {
var instanceVar;
//此this.each()指的就是对当前对象的遍历，这里的当前对象指代的就是对当前两个下拉选择框对象的一一遍历
this.each(function(){
var originalSelect = $(this);
//check if element is a select
if(originalSelect[0].tagName.toUpperCase()==="SELECT"){
//wrap the original select在原始的
//save this instance to return it
instanceVar = inputSelect
}else{
//not a select
return false;
}
});//-end each
/ public methods /
/**
- Adds an option to the editable select
- @param {String} value - the options value
- @returns {void}
*/
instanceVar.addOption = function(value){
prepareOption(value,instanceVar.parent());
};
/**
- Removes a specific option from the editable select
- @param {String,Number} value - the value or the index to delete
- @returns {void}
*/
instanceVar.removeOption = function(value){
switch(typeof(value)){
case "number":
instanceVar.parent().children("ol").children(":nth("+value+")").remove();
break;
case "string":
instanceVar.parent().children("ol").children().each(function(index,optionValue){
if($(optionValue).text()==value){
$(optionValue).remove();
}
});
break;
}
};
/**
- Resets the select to it's original
- @returns {void}
*/
instanceVar.restoreSelect = function(){
var originalSelect = instanceVar.parent().children("select");
var objID = instanceVar.attr("id");
instanceVar.parent().before(originalSelect);
instanceVar.parent().remove();
originalSelect.css({visibility: "visible",display: "inline-block"});
originalSelect.attr({id: objID});
};
//return the instance
return instanceVar;
};
/ private methods /
//prepareOption函数的作用就是在当前下拉框中添加新选项
function prepareOption(value,wrapper){
var selectOption = $("
var inputSelect = wrapper.children("input");
selectOption.css({
padding: "3px",textAlign: "left",cursor: "pointer"
}).hover(
function(){
selectOption.css({backgroundColor: "#eee"});
},function(){
selectOption.css({backgroundColor: "#fff"});
});
//bind click on this option
selectOption.click(function(){
inputSelect.val(selectOption.text());
inputSelect.trigger("change");
});
}
}( jQuery ));
