Question

当用户选择下拉列表中的项目时，我可以获得一些帮助来执行某些功能吗？

首先，下面的代码显示了一个可以从中选择的语言环境的下拉列表。

显示包含不同区域设置的下拉列表的代码：

<p>Please select a locale.</p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Locales</button>
<div id="locale" class="dropdown-content">
    <a href="#enUS">en-US</a>
    <a href="#jaJP">ja-JP</a>
    <a href="#deDE">de-DE</a>
</div>
<script>
    function myFunction() {
        document.getElementById("locale").classList.toggle("show");
    }


</script>

现在，如果用户从下拉列表中选择en-US，则需要执行一个功能，该功能根据所选的区域设置显示不同的数据，如下所示。如果用户选择ja-JP，它将基于＆＃39; ja-JP＆＃39;执行相同的操作。语言环境。

Intl.DateTimeFormat('en-US').format(new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
Intl.NumberFormat('en-US').format(1234.56));

谢谢！

Answer 1

最简单的可能是：

<a href="#enUS" onclick="setFormat('en-US')">en-US</a>

<script>
setFormat(locale) {
  Intl.DateTimeFormat(format).format(new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
  Intl.NumberFormat(format).format(1234.56));
}
</script>

Answer 2

首先，我不喜欢这种方法;如果你有使用jQuery的自由，那么请你做我真诚的要求。它会让你的生活更轻松。

转到你给我们的东西：如果我理解正确，你想根据用户的下拉选择触发一个事件？如果是这种情况，代码实际上非常简单：

<select id="locale">

  <option>en-US</option>
  <option>jp-JP</option>

</select>

然后一些javascript来检测更改：

$( document ).ready( function() {

  $( "#locale" )
    .change( function() {

      var selectedLocale = $( "#locale option:selected" ).text();

      Intl.DateTimeFormat( selectedLocale ).format(new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
      Intl.NumberFormat( selectedLocale ).format(1234.56));

    } );

} );

这应该可以解决问题。

小提琴：https://jsfiddle.net/owsrr6dk/1/

Answer 3

对于下拉菜单，最好使用select html元素

<强> HTML

<p>Please select a locale.</p>
<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Locales</button>
  <select id="locale" class="dropdown-content">
    <option value="en-US">en-US</option>
    <option value="ja-JP">ja-JP</option>
    <option value="de-DE">de-DE</option>
  </select>
</div>

如果您仍想要<a>链接，请附加onlcick事件，即更改

<a href="#enUS">en-US</a>

到

<a href="#enUS" onclick="eventFire('en-US')">en-US</a>

<强>的Javascript

将事件监听器附加到select

function eventFire(val) {
  alert(val);
  //  Intl.DateTimeFormat(val).format(new Date(Date.UTC(2012, 11, 20, 3, 0, 0)));
  //  Intl.NumberFormat(val).format(1234.56));
}

// add this only if you use select else eventFire will be sufficient
var elm = document.getElementById('locale');
elm.addEventListener('change', function(e) {
  eventFire(e.target.value);
})

<强> Demo

使用用户从Javascript下拉列表中选择的值执行函数

3 个答案: