div itself simulates a better operation

cannot be done. You can write it yourself with div to simulate the function of select.

pure dom operation, you can write a method to generate select. To control whether the option is displayed or not, it essentially outputs the < option > < / option > tag.

js can be implemented in many ways. If you use jq, you can generate option dynamically. If you use things like vue, it is even easier. The data of option changes according to variables. You can manipulate variables

Yes, when you want to drop down, you can simulate the click event without actually clicking

for example, trigger of jq

vue, then change the data to show

maybe it's not clear enough. In fact, the requirement is to achieve the effect of the following figure. The drop-down list contains the number of statistics for each state, but the quantity statistics displayed when selected cannot contain quantity statistics. However, because in select, only the selected option text can be displayed, the selected display content cannot be modified separately, and the modification will also modify the corresponding option text, so.

in fact, at first my idea was to use div to write a select component to simulate the effect of select tags, and also wrote such a component to use. However, a serious problem is that select tags are displayed in different styles on different devices, so it is difficult for me to write this component to have the same display effect on some other devices, or at least troublesome.

later, I thought of another method, that is, the current method, adding a div to the select tag to block the selected content, so that whenever option is selected, you only need to display the status on the div, regardless of the select tag. But there is another problem, that is, because div blocks parts of select, the select drop-down list cannot be triggered when you click div. That's the question.

and my final solution is as follows:

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 -sharpe5e6e7;
    border-top: 1px solid -sharpe5e6e7;
    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:

//
$("-sharpBillState@(IdSuffix)").on("change", function () {
    var option_name = $(this).find("option:selected").text(),
        item_name = option_name.replace(/\(\d+\)\s/, "");
    $("-sharpBillState@(IdSuffix)Text").text(item_name);
    $(this).blur();
});
//
$("-sharpBillState@(IdSuffix)").on({
    focus: function() {
        $("-sharpBillState@(IdSuffix)Text").css("border-color", "-sharp1ab394");
    },
    blur: function () {
        $("-sharpBillState@(IdSuffix)Text").css("border-color", "-sharpe5e6e7");
    }
});