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获得更改事件的选定值，如下所示。

 

【实践总结】：

使用中，注意，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:data-pagetype="${productType.pageType}"

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

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

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

　　　　　　</option>

　　　　</ul>

　　</select>

</div>

js部分

$(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'});

                }

        });

});

 

​