0

在不点击select标签的情况下,用js动态显示select标签下拉,怎么实现?

2018-12-21 提问
6 个回答
0

已采纳

或许说得不够明白。其实需求是实现下图这种效果,下拉列表中包含每一种状态的统计数量,但是选中时显示出来的不能包含数量统计。但由于select中,显示的只能是选中的option文本,无法单独修改选中的显示内容,修改会将对应的option文本也修改,所以……
clipboard.png

其实一开始我的想法也是用div写一个select组件模拟select标签的效果,而且也写了一个这样的组件来用。但是,有个很严重的问题就是,select标签在不同的设备上,显示的样式是不同的,所以我写的这个组件很难在其他一些设备上具有同样的显示效果,至少很麻烦。

后来,又想了另外一种方法,也就是现在的方法,在select标签上加一个div挡住选中的内容,这样就是每当选中option时,只需要将状态显示在div上面就行了,不用去管select标签。但这样又有了另外一个问题,就是由于div挡住了select部分内容,故而点击div时就无法触发select下拉列表。也就是所提问的问题。

而我最后的解决方法如下:

css:

.selectBox {
    display: inline-block;
    position: relative;
}
.selectTips {
    position: absolute;
    height: 100%;
    width: 85%;
    left: 1px;
    top: 0;
    text-align: left;
    line-height: 37px;
    background: white;
    border-bottom: 1px solid #e5e6e7;
    border-top: 1px solid #e5e6e7;
    pointer-events: none;
    padding-left: 15px;
}

html:

<div class="selectBox">
    <select name="BillState" id="BillState@(IdSuffix)" class="search@(IdSuffix) form-control">
        <option value="" selected disabled>请选择单据状态</option>
        <option value="">所有单据</option>
        <option value="@((int)SaleOrderState.Invalid)" item-key="Invalid">草稿</option>
        <option value="@((int)SaleOrderState.ToDelive)" item-key="ToDelive">待出库</option>
        <option value="@((int)SaleOrderState.Deliving)" item-key="Deliving">部分出库</option>
        <option value="@((int)SaleOrderState.Delived)" item-key="Delived">已出库</option>
        <option value="@((int)SaleOrderState.ToSend)" item-key="ToSend">待发货</option>
        <option value="@((int)SaleOrderState.Send)" item-key="Send">已发货</option>
        <option value="@((int)SaleOrderState.ToRefund)" item-key="ToRefund">待退货</option>
        <option value="@((int)SaleOrderState.Refunding)" item-key="Refunding">@(BM.Util.EnumHelper.GetDescription(SaleOrderState.Refunding))</option>
        <option value="@((int)SaleOrderState.Refunded)" item-key="Refunded">已退货</option>
        <option value="@((int)SaleOrderState.Cancel)" item-key="Cancel">已取消</option>
        <option value="@((int)SaleOrderState.ToPay)" item-key="ToPay">待收款</option>
    </select>
    <div class="selectTips" id="BillState@(IdSuffix)Text">
        请选择单据状态
    </div>
</div>

js:

//选择事件
$("#BillState@(IdSuffix)").on("change", function () {
    var option_name = $(this).find("option:selected").text(),
        item_name = option_name.replace(/\(\d+\)\s/, "");
    $("#BillState@(IdSuffix)Text").text(item_name);
    $(this).blur();
});
//状态事件
$("#BillState@(IdSuffix)").on({
    focus: function() {
        $("#BillState@(IdSuffix)Text").css("border-color", "#1ab394");
    },
    blur: function () {
        $("#BillState@(IdSuffix)Text").css("border-color", "#e5e6e7");
    }
});
0

div自己模拟一个把 比较好操作

0

做不到。可以用div自己写,模拟select的功能。

0

纯dom操作的话,可以自己写个生成select的方法,要控制选项显示与否,本质也就是是否输出 <option></option> 标签。

0

js能实现的方法很多,jq的话就动态生成option就好了,如果是用vue之类的,就更简单,option的数据是根据变量变化的,直接操作变量

0

可以的,当你想下拉的时候,你可以模拟点击事件,不需要真实去点击的

比如jq的 trigger

vue的话改变数据,去展示

撰写答案

推广链接