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