二级关联之下拉显示选项之模糊搜索

效果如下：1.当输入公司部分名称是，模糊查询显示10项；

二级关联之下拉显示选项之模糊搜索

2.当公司选定后，即显示当前公司名下的站点

二级关联之下拉显示选项之模糊搜索

如果这是你想要或相近的效果，请继续。

先上html，主要是公司和站点部分：

<div class="main_in_search_item">
    <div class="main_in_search_item_text">公司：</div>
    <input class="main_in_search_input_text" id="chooseCompany" name="chooseCompany" onkeyup="showCompany();" />
    <div class="chooseCompanySelect" id="chooseCompanySelect"  ></div>
    <input type="hidden" id="hiddeninput"/>
</div>
<div class="main_in_search_item">
    <div class="main_in_search_item_text">站点：</div>
    <input class="main_in_search_input_text" id="chooseNDID" name="chooseCompany"  onclick="showNDID();"/>
    <div class="chooseCompanySelect" id="chooseNDIDSelect"  ></div>
    <input type="hidden" id="hiddeninputNDID"/>
</div>

为了达到下拉框的效果，class="chooseCompanySelect"样式为：

.chooseCompanySelect{
    background: rgba(225,225,225,0.9);
    border: 1px solid #ccc;
    box-shadow: 1px 1px 3px #ededed;
    display: none;
    position: absolute;
    width: 223.22px;
    z-index: 1;
    margin-left: 41%;
    display: none;
}

当鼠标悬浮下拉选项，添加背景色：

.chooseCompanySelect ul li:hover{
    background:#0099ff;
}

接下来是js函数：当输入公司名称时，触发onkeyup事件：

function showCompany(){//展示公司下拉框
    $('#chooseCompanySelect').empty();//清空下拉框
    var name=$('#chooseCompany').val();
    if(!name){
        return;
    }
    var url='./?m=ajax&a=queryCompany&Name='+name;
    $.getJSON(url,function (data) {
      var company=data;
      var item='<ul>';
      //公司下拉赋值
      for(var i=0;i<company.length;i++){
        item+= '<li value='+company[i]['CPID']+'>'+company[i]['Name']+'(余额:'+company[i]['Money_CPID']+')</li>';
      }
      item+='</ul>';
      $('#chooseCompanySelect').append(item);
      $('#chooseCompanySelect').show();
    });
}

选中公司下拉框选项后，触发下拉框选项单击事件，因为下拉选项是页面加载后添加的元素，属于未来元素，需要通过‘on’委托事件：

$('body').on('click','#chooseCompanySelect ul li',function () {
    var allhtml=$(this).html();
    var arr=allhtml.split('(');
    var company=arr[0];
    var money=arr[1].split(')')[0];
    money=money.split('余额:')[1];
    $('#hiddeninput').val($(this).attr('value'));//将cpid赋给隐藏框，为查询站点提供参数
    $('#cpidmoney').val(money);//money金额赋值隐藏框
    var cpid =$(this).attr('value');
    $('#chooseCompany').val(company);//赋值给公司input
    $('#chooseCompanySelect').hide();
    showNDID();//查询站点
});

function showNDID(){//展示站点下拉框
    $('#chooseNDIDSelect').empty();
    var cpid=$('#hiddeninput').val();
    var url='./?m=ajax&a=queryNDID&CPID='+cpid;
    $.getJSON(url,function (data) {
        var ndids=data;
        var itemndid='<ul>';
        //站点下拉赋值
        for(var i=0;i<ndids.length;i++){
            itemndid+='<li value='+ndids[i]['ID']+'>'+ndids[i]['Name']+'</li>';
        }
        itemndid+='</ul>';
        $('#chooseNDIDSelect').append(itemndid);
        $('#chooseNDIDSelect').show();
    });
}

同公司下拉框选项一样，绑定未来事件：

$('body').on('click','#chooseNDIDSelect ul li',function () {
    var name=$(this).html();
    $('#hiddeninputndid').val($(this).attr('value'));//将ndid赋给隐藏框
    $('#chooseNDID').val(name);//赋值给站点input
    $('#chooseNDIDSelect').hide();
});

如果站点选择后，想要更换，可为站点input框添加一个单击事件

onclick="showNDID();"

这样，基本功能就完成了，谢指教。

二级关联之下拉显示选项之模糊搜索

相关推荐