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