如何在html中下拉列表data-tz？ [英] How to list data-tz in drop down in html?

问题描述

< （）函数（）{var selText = $（this）.text（）。$（$。$）$（。下拉菜单a ）; $（this）.parents（'。btn-group'）。find（'。btn-secondary'）。html（selText）;}）;

< pre class =snippet-code-html lang-html prettyprint-override> < 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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！