Question 184185 in Html Question posted in
Some basic documentation can be found here.

Html – Add Function to change place of element

I want if the local time is in europe that the option europe changes place under the heading "Europe"

This is what I came with:

var userCountry = ""; // Store user's country here (e.g., obtained through geolocation)

var europeanCountries = ["Austria", "Belgium", "Bulgaria", "Croatia", "Cyprus", "Czech Republic", "Denmark", "Estonia", "Finland", "France", "Germany", "Greece", "Hungary", "Ireland", "Italy", "Latvia", "Lithuania", "Luxembourg", "Malta", "Netherlands", "Poland", "Portugal", "Romania", "Slovakia", "Slovenia", "Spain", "Sweden"];

if (europeanCountries.includes(userCountry)) {
  var localOption = document.querySelector("#timezone [value=local]");
  var europeOptgroup = document.getElementById("europe-optgroup");
  europeOptgroup.appendChild(localOption);
}
<select id="timezone" onkeyup="filterFunction(this,event)" onchange="changeTimezone()">
  <option value="local" selected>Local Time</option>
  <optgroup label="Europe" id="europe-optgroup">
    <option value="GMT">London</option>
    <option value="Europe/Amsterdam">Amsterdam</option>
    <option value="Europe/Athens">Greece</option>
    <option value="Europe/Moscow">Moscow</option>
  </optgroup>
  <optgroup label="USA">
    <option value="America/New_York">New York</option>
    <option value="America/Los_Angeles">Las Vegas</option>
  </optgroup>
</select>
Tags:

2

Answers


  1. 0

    You could pass the <select> element to a function that does the shuffling for you.

    const EU_COUNTRIES = ["Austria", "Belgium", "Bulgaria", "Croatia", "Cyprus", "Czech Republic", "Denmark", "Estonia", "Finland", "France", "Germany", "Greece", "Hungary", "Ireland", "Italy", "Latvia", "Lithuania", "Luxembourg", "Malta", "Netherlands", "Poland", "Portugal", "Romania", "Slovakia", "Slovenia", "Spain", "Sweden"];

const main = async () => {
  placeLocalTime(document.querySelector('#timezone'));
};

const placeLocalTime = async (selectEl) => {
  const userCountry = await getUserCountry();
  if (EU_COUNTRIES.includes(userCountry)) {
    const localOption = selectEl.querySelector('option[value="local"]'),
      europeOptgroup = selectEl.querySelector('#europe-optgroup');
    europeOptgroup.prepend(localOption);
  }
};

const getUserCountry = async () => {
  try {
    const response = await fetch('https://geolocation-db.com/json/', {
      headers: { 'Content-Type': 'application/json' }
    });
    const data = await response.json();
    return response.country_name;
  } catch (e) {
  
  }
  return 'Germany'; // Default to Germany... in the case of this snippet
};

main(); // Call main
    <select id="timezone" onkeyup="filterFunction(this,event)" onchange="changeTimezone()">
  <option value="local" selected>Local Time</option>
  <optgroup label="Europe" id="europe-optgroup">
    <option value="GMT">London</option>
    <option value="Europe/Amsterdam">Amsterdam</option>
    <option value="Europe/Athens">Greece</option>
    <option value="Europe/Moscow">Moscow</option>
  </optgroup>
  <optgroup label="USA">
    <option value="America/New_York">New York</option>
    <option value="America/Los_Angeles">Las Vegas</option>
  </optgroup>
</select>
    Login or Signup to reply.
  2. 0

    Not sure what your exactly looking for… but if your looking for getting location and setting option is selected.
    var country = Intl.DateTimeFormat().resolvedOptions().timeZone; is one option. i.e the output could be America/Toronto or Europe/Athens where you are located it will be different for testing.

    Then you could check if that has which you have requested Europe then you can set the value of the options based on if it has Europe in it. Or else it will default the option of local time.

    Then you can use the select Value property change the option based on where there are located. var localOption = document.querySelector("#timezone");

    localOption.value = country;

    https://www.w3schools.com/jsref/prop_select_value.asp

    ***just of note this will not work unless your are actually in Europe or you Manually set your location. ***

    Here is an example of what you might be looking for
    https://jsfiddle.net/5nvkby3q/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search