flexselect 可以输入文本匹配的下拉列表

下面为官方文档上面的，在附件里面也有些插件的说明，很容易

How?

First, load the default styles, jQuery, the LiquidMetal scoring algorithm, and the plugin.

<link rel="stylesheet" href="flexselect.css" type="text/css" media="screen" />
<script src="jquery.min.js" type="text/javascript"></script>
<script src="liquidmetal.js" type="text/javascript"></script>
<script src="jquery.flexselect.js" type="text/javascript"></script>

It's important that the styles come before the javascript. Now, let's convert your select boxes into some flexselect goodness on DOM ready:

jQuery(document).ready(function() {
  $("select.flexselect").flexselect();
});

This will turn all select elements with a class of flexselect into a flex matching masterpiece:

<select class="flexselect">
  <option value="1">George Washington</option>
  <option value="2">John Adams</option>
  <option value="3">Thomas Jefferson</option>
  ...
</select>

Flexselect also supports some options to override the default behavior:

 

1.获取当前控件所选的值和文本

如下：

    $("#ID" + "_flexselect").val("文本");    //得到控件的文本    _flexselect只有加上此后缀才行，因为JS后台转成了此下拉列表
    $("#ID" ).val(" ");   //得到控件的值

 

 

2.对下拉列表赋值，然后刷新下拉列表值

例1：

var options = [];
    options.push({
     value : "",
     name : "任意范围"
    });
    var targetSelNode = document.getElementById("accArea1");
    targetSelNode.updateOptions(options);

例2：

var options = [];
    <% List<AccArea> accList =(List<AccArea>)request.getAttribute("accAreaList");
    if(accList!=null && accList.size()>0)
    {
     for(int i=0;i<accList.size();i++){
      AccArea a = accList.get(i);
      a.getId();
      a.getName();
      %>
      options.push({
       value : '<%=a.getId()%>',
       name :  '<%=a.getName()%>'
      });
      <%
     }
    }
     
    %>
    
    var targetSelNode = document.getElementById("accArea1");
    targetSelNode.updateOptions(options);

 

3.使控件失效或生效方法

注：这两种方法以flexselect都没有效果，暂时没有发现好的办法，所以项目中只好将下拉列表值赋空

$("#accArea1").attr("disabled","");    //使生效

$("#accArea1").attr("disabled","none");  // 使失效
    document.all.form.officeCode.disabled=false;
    document.all.form.userPortType.disabled=ture;

 

4.下拉列表的点击事件

 $(document).ready(function() {
         $("select[class*=flexselect]").flexselect(
        {
         allowMismatch: true,
         onblur: changeSelect,
         inputNameTransform:  function(name) { return "new_" + name; }
        
       });            
      });
   这个里面的onblur: changeSelect  就是定义下拉列表的事件方法，然焦点离开时，调用changeSelect,方法
此方法如下：

function changeSelect(seleted, option) {
        if($("#accArea1").val()==""){
            var selObj = document.getElementById("officeCode1");
            selObj.options.length=0;
            return false;
       }else{
           doGetOfficeCodeList();
        }
       }

option为当前选中项的值，通过option.name,option.value得到文本及值，selected

通过var id = seleted.select.attr("id");得到ID，这就方便了！