如何在html中下拉列表data-tz？

本文介绍了如何在html中下拉列表data-tz？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery .min.js>< / script>< link rel =stylesheethref =https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.cssintegrity = sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4crossorigin =anonymous>< script src =https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.jsintegrity = sha384-cs / chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY // 20VyM2taTB4QvJcrossorigin =anonymous>< / script>< script src =https：//stackpath.bootstrapcdn。 com / bootstrap / 4.1.0 / js / bootstrap.min.jsintegrity =sha384-uefMccjFJAIv6A + rW + L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt / 6v9KI65qnmcrossorigin =anonymous>< / script>< div class =btn-group btn-group-smrole =group> < button id =startHourtype =buttonclass =btn btn-secondarydata-toggle =dropdownhref =＃>区域< / button> < div class =dropdown-menuaria-labelledby =zone> < a class =dropdown-itemhref =＃data-tz-abbrev =est> America / New_York< / a> < a class =dropdown-itemhref =＃data-tz-abbrev =cst> America / Chicago< / a> < a class =dropdown-itemhref =＃data-tz-abbrev =mst> America / Devner< / a> < a class =dropdown-itemhref =＃data-tz-abbrev =pst> America / Los_Angeles< / a> < / div>< / div> 下拉菜单中的区域名称，但我需要显示区域的缩写名称。 这里是我使用的html代码： b $ b < div id =zoneclass =btn-group btn-group-smrole =group> < button type =buttonclass =btn btn-secondarydata-toggle =dropdown> zone< / button> < div class =dropdown-menuaria-labelledby =zone> < a class =dropdown-itemhref =＃data-tz-abbrev =est> America / New_York< / a> < a class =dropdown-itemhref =＃data-tz-abbrev =cst> America / Chicago< / a> < a class =dropdown-itemhref =＃data-tz-abbrev =mst> America / Devner< / a> < a class =dropdown-itemhref =＃data-tz-abbrev =pst> America / Los_Angeles< / a> < / div> < / div> 用于显示选中按钮的Javascript代码。这里是我使用的代码： $（。dropdown-menu a）。click（function（）{ $ b var selText = $（this）.text（）; var currentBtn = $（this）.closest（.btn-group）。children（button）; var currentUnit = currentBtn.data（unit）; currentBtn.html（selText）; console.log（currentUnit）; $（。+ currentUnit）.text（selText）; }）; 如何在drop-down中列出data-tz-abbrev，而不是在下拉列表中显示america / chicago ？解决方案您需要在区域按钮的点击事件中设置下拉项目的文本。 this）.text（）; var currentBtn = $（this）.closest（.btn-group）。children（button）; var currentUnit = currentBtn.data（unit）; currentBtn.html（selText） ; console.log（currentUnit）; $（。+ currentUnit）.text（selText）;}）; $（＃zone button）。click（function（）{$（。dropdown-item）。 each（function（）{$（this）.text（$（this）.attr（'data-tz-abbrev'））; //使用data-tz-abbrev属性设置选项文本。}）;}）; < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div id =zoneclass =btn-group btn-group-smrole =group> < button type =buttonclass =btn btn-secondarydata-toggle =dropdown> zone< / button> < div class =dropdown-menuaria-labelledby =zone> < a class =dropdown-itemhref =＃data-tz-abbrev =est> America / New_York< / a> < a class =dropdown-itemhref =＃data-tz-abbrev =cst> America / Chicago< / a> < a class =dropdown-itemhref =＃data-tz-abbrev =mst> America / Devner< / a> < a class =dropdown-itemhref =＃data-tz-abbrev =pst> America / Los_Angeles< / a> < / div>< / div>$(".dropdown-menu a").click(function() { var selText = $(this).text(); $(this).parents('.btn-group').find('.btn-secondary').html(selText);});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script><div class="btn-group btn-group-sm" role="group"> <button id="startHour" type="button" class="btn btn-secondary" data-toggle="dropdown" href="#">Zone</button> <div class="dropdown-menu" aria-labelledby="zone"> <a class="dropdown-item" href="#" data-tz-abbrev="est">America/New_York</a> <a class="dropdown-item" href="#" data-tz-abbrev="cst">America/Chicago</a> <a class="dropdown-item" href="#" data-tz-abbrev="mst">America/Devner</a> <a class="dropdown-item" href="#" data-tz-abbrev="pst">America/Los_Angeles</a> </div></div>I am listing zone name in drop down but I need to display abbreviate name of zone.Here is the html code I used:<div id="zone" class="btn-group btn-group-sm" role="group"> <button type="button" class="btn btn-secondary" data-toggle="dropdown">zone</button> <div class="dropdown-menu" aria-labelledby="zone"> <a class="dropdown-item" href="#" data-tz-abbrev="est">America/New_York</a> <a class="dropdown-item" href="#" data-tz-abbrev="cst">America/Chicago</a> <a class="dropdown-item" href="#" data-tz-abbrev="mst">America/Devner</a> <a class="dropdown-item" href="#" data-tz-abbrev="pst">America/Los_Angeles</a> </div></div>Javascript code used to display selected in button. Here is the code I used:$(".dropdown-menu a").click(function(){ var selText = $(this).text(); var currentBtn = $(this).closest(".btn-group").children("button"); var currentUnit = currentBtn.data("unit"); currentBtn.html(selText); console.log(currentUnit); $("."+ currentUnit).text(selText);});How can I list data-tz-abbrev in drop down instead of displaying america/chicago in drop down? 解决方案 You need to set the dropdown item's text on the click event of the zone button.$(".dropdown-menu a").click(function() { var selText = $(this).text(); var currentBtn = $(this).closest(".btn-group").children("button"); var currentUnit = currentBtn.data("unit"); currentBtn.html(selText); console.log(currentUnit); $("." + currentUnit).text(selText);});$("#zone button").click(function() { $(".dropdown-item").each(function() { $(this).text($(this).attr('data-tz-abbrev')); // Set the option text using data-tz-abbrev attribute. });});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="zone" class="btn-group btn-group-sm" role="group"> <button type="button" class="btn btn-secondary" data- toggle="dropdown">zone</button> <div class="dropdown-menu" aria-labelledby="zone"> <a class="dropdown-item" href="#" data-tz-abbrev="est">America/New_York</a> <a class="dropdown-item" href="#" data-tz-abbrev="cst">America/Chicago</a> <a class="dropdown-item" href="#" data-tz-abbrev="mst">America/Devner</a> <a class="dropdown-item" href="#" data-tz-abbrev="pst">America/Los_Angeles</a> </div></div> 这篇关于如何在html中下拉列表data-tz？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！