html中select标签的选项携带多个值

搜索参考资料:SELECT标签中的选项可以携带多个值吗?

【摘抄】:

它可能有一个select选项中的多个值,如下所示。

<select id="ddlEmployee" class="form-control">

<option value="">-- Select --</option>

<option value="1"      data-city="Washington" data-doj="20-06-2011"    >John</option>

<option value="2"      data-city="California"     data-doj="10-05-2015"    >Clif</option>

<option value="3"      data-city="Delhi"             data-doj="01-01-2008"    >Alexander</option>

</select>

 你可以使用jquery获得更改事件的选定值,如下所示。

 $("#ddlEmployee").change(function () { alert($(this).find(':selected').data('city')); });

【实践总结】:

使用中,注意,data-后需要用小写;data-pageType="2" 这个,data('pageType')会失效, 需要用小写 data('pagetype');

thymeleaf 中示例

<div class="col-sm-3">

        <select id="typeId" name="typeId" class="form-control">

                <ul th:each="productType:${productTypeList}">

                        <option th:if="${productType.typeUsing!=4}"

                                th:data-pagetype="${productType.pageType}"

                                th:value="${productType.id}"

                                th:text="${productType.typeName}"

                                th:selected="${productType.id==news.typeId}">

                        </option>

                </ul>

        </select>

</div>

js部分(采用的 jquery)

$(function(){

        $('#typeId').on('change',function(){

                //在这里执行你需要的操作

                let selectedOption = $(this).find(':selected');

                var pageType = selectedOption.data('pagetype');

                if(pageType==4){

                        $('#commentOpened').css({display:'block'});

                }else{

                        $('#commentOpened').css({display:'none'});

                }

        });

});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值