Perform functions with the value user selects from a dropdown in Javascript

Question

Can I get some help to perform some functions when a user selects an item in dropdown list?

First, below code shows a dropdown with locales one can select from.

Code that shows a dropdown with different locales:

<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>

And now if a user selects en-US from dropdown, it will need to perform a function that shows different data based on the selected locale like below. If a user selects ja-JP, it will perform the same thing based on 'ja-JP' locale.

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

Thank you!

score 1 · Answer 1 · answered Jan 11 '16 at 08:40

1

Probably the most straightforward is:

<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>

answered Jan 11 '16 at 08:40

Erik Pukinskis

480
5
11

Thank you. I tried using this, but with this code the dropdown list stops working. I am trying to use document.getElementByID("demo").innerHTML = Intl.DateTimeFormat,... to show on web. Any suggestions? – user5772458 Jan 12 '16 at 19:45

score 0 · Answer 2 · answered Jan 11 '16 at 08:34

For starters, I wouldn't prefer this method; if you have the liberty to use jQuery, it's my sincere request that you please do. It'll make your life much easier.

Moving onto what you've given us: if I understand this correctly, you want to trigger an event based on the user's drop down selection? If that's the case, the code's actually pretty simple:

<select id="locale">

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

</select>

Then some javascript to detect for changes:

$( 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));

    } );

} );

That should do the trick.

The fiddle: https://jsfiddle.net/owsrr6dk/1/

Raunak Kathuria · Answer 3 · 2016-01-11T08:48:49.100

For dropdown better to use select html element

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>

If you still want <a> link then attach onlcick event i.e change

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

to

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

Javascript

Attach event listener to 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

Perform functions with the value user selects from a dropdown in Javascript

3 Answers3