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

js如何控制select标签内的所有选项显示隐藏？

发布于
2018-12-21

✓ 已被采纳

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

其实一开始我的想法也是用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");
    }
});