jsp多选并且模糊查询下拉框

最新推荐文章于 2021-07-29 09:55:43 发布

原创最新推荐文章于 2021-07-29 09:55:43 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

JSP 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在JSP中实现多选和模糊查询功能的下拉框。通过JavaScript的jQuery库，当用户在输入框中输入文字时，下拉框中的选项会根据输入内容进行动态过滤显示。同时，展示了相关的CSS和HTML代码段来完成界面的样式和结构设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(document).ready(function() {$ (“.ordrStatus1”).hide();
//来源选择弹出框
$(“#closeStatus”).click(function() { $(“.ordrStatus1”).fadeOut(300); });$ (“#closd”).click(function(){
$(“.ordrStatus1”).fadeOut(300); });$ (“.beSelect”).removeAttr(“border-color”);
$(“#searchText”).keyup(function(){ var searchText =$ (this).val();
var beSelectT=”“;
$(“.beSelect”).each(function(){ beSelectT =$ (this).parent().text();
if(beSelectT.indexOf(searchText)==-1){//不包含
$(this).prop(“checked”,false);$ (this).parent().hide();
}else{
$(this).parent().show();
}
});

       });
 });


 function showStatus1(abc){
            var ordrStatus1s = $(".ordrStatus1").is(":hidden");
            if(ordrStatus1s){
                 $("#searchText").val("");
                 var value = $("#userSelect").val();
                 $("#selectList").children().remove();
                 $.ajax({
                       type : "POST",
                       data:{userId2: value},
                     url: "/query.action",
                       success: function(json){
                            var divStru ="";
                            divStru = "<div><input id=\"selecAll1\" type=\"checkbox\" style=\"width:20px;display:inline-block;\" onclick=\"selectAll1()\" />全选</div> ";

     var checkedIds = $("#orderStatusT").val();
     var flag = true;
                            $.each(json,function(key,obj){
                                 if(checkedIds.indexOf(obj.vipId)!=-1){

div=”

”+obj.vipName+”

“;
}else{
flag=false;
div=”

”+obj.vipName+”

“;
}
divStru += div;
});
divStru += “”;

(“#selectList”).append(divStru);
if(flag){ $(“#selectList”).append(divStru); if(flag){$ (“#selecAll1”).prop(“checked”,true);
}
}
});

                var offset = $(abc).offset();
                var w = $(abc).width();

               $(".ordrStatus1").show();
               $("#selectList").css({width: w+15});
               $("#selectList").css("padding-left","20px");
               $(".ordrStatus1").css("height","auto");
               $("#selectList").css("height","auto");
               $(".ordrStatus1").css("max-height","275px");
               $("#selectList").css("max-height","200px");
            }else{
                 $(".ordrStatus1").hide();
            }


 }

 function selectAll1(){
       var isCheck = $("[id='selecAll1']").prop("checked");
            $(".beSelect").each(function(){
                 if(!$(this).is(":hidden")){
                       $(this).prop("checked",isCheck);
                 }

       });
 }
 //确定选中
 function sureSelect(){
       var checkIds = "";
       var checkNames = "";
       $(".beSelect:checked").each(function(){
            checkIds += $(this).attr('value') +",";
            checkNames += $(this).parent().text()+",";
       });
       $("#vipId").val(checkIds);
       checkNames = checkNames.substring(0, checkNames.length-1);
       checkIds = checkIds.substring(0, checkIds.length-1);
       $("#orderStatus").val(checkNames);
       $("#orderStatusT").val(checkIds);
       $(".ordrStatus1").fadeOut(200);
 };

================================================css==========css=====begin===============css==============

 .ordrStatus1{
 vertical-align:middle;
 border:1px solid #ccc;
  background-color: #fff;
  position:absolute;display:none;
  cursor: pointer;
  border-radius:1px solid #ccc;
  color:#0060ca;
  z-index:9999;
  }

  .beSelect{
  height:18px;
  border-color:#FFFFFF;
  }
  #selecAll1 {
  height:18px;
  border-color:#FFFFFF;
  }

================================================css==========css=====end===============css==============

================================================html==========html=====start===============html==============

客户