Javascript value of option when load in page

I'm stuck on this, and could use help from anyone.

My question is: how do I load a default value in a select element when the page opens?

In other words, when the page first loads, the select element already has an option selected, without the user having to interact with it. Otherwise, if the user wants to select something else, they can use the select element normally for the other options.

<p>Select a league list.</p>

<select id="mySelect" onchange="myFunction()">
  <option value="<iframe src='http://www.tablesleague.com/iframe?width=232&height=430&font_name=Tahoma&position=1&font_size=12&team_link=1&link_color=404040&games=1&wins=1&draws=0&lost=0&goals=0&goals_against=0&gd=0&points=1&next=0&form=0&font_size=12&font_color=000000&bg_color=FFFFFF&header_font_color=FFFFFF&header_bg_color=1fb9e4&bg_col=1fb9e4&font_color_col=FFFFFF&highlight=e3e3e3&hover=fff6bf&league_header=1&league=l_145&team=&timezone=7&language=2&team_flags=0' width='232' height='500px' frameborder='0' scrolling='no'></iframe>" selected="selected">Premier League
  <option value="<iframe src='http://www.tablesleague.com/iframe?width=232&height=430&font_name=Tahoma&position=1&font_size=12&team_link=1&link_color=404040&games=1&wins=1&draws=0&lost=0&goals=0&goals_against=0&gd=0&points=1&next=0&form=0&font_size=12&font_color=000000&bg_color=FFFFFF&header_font_color=FFFFFF&header_bg_color=1fb9e4&bg_col=1fb9e4&font_color_col=FFFFFF&highlight=e3e3e3&hover=fff6bf&league_header=1&league=l_474&team=&timezone=7&language=2&team_flags=0' width='232' height='430' frameborder='0' scrolling='no'></iframe>">Seria A
  <option value="BBVA">BBVA
  <option value="Bundes">Bundes
</select>
<p id="demo"></p>

<script>
document.getElementById('mySelect').value = '';
function myFunction() {
    var x = document.getElementById("mySelect").value = '';
    document.getElementById("demo").innerHTML = x;
}
</script>

Answers


You have a value selected using the selected attribute on your HTML.

With

document.getElementById('mySelect').value = '';

you are wiping the current value. Try removing that line.


Try this code:

<p>Select a league list.</p>

<select id="mySelect">
  <option value="<iframe src='http://www.tablesleague.com/iframe?width=232&height=430&font_name=Tahoma&position=1&font_size=12&team_link=1&link_color=404040&games=1&wins=1&draws=0&lost=0&goals=0&goals_against=0&gd=0&points=1&next=0&form=0&font_size=12&font_color=000000&bg_color=FFFFFF&header_font_color=FFFFFF&header_bg_color=1fb9e4&bg_col=1fb9e4&font_color_col=FFFFFF&highlight=e3e3e3&hover=fff6bf&league_header=1&league=l_145&team=&timezone=7&language=2&team_flags=0' width='232' height='500px' frameborder='0' scrolling='no'></iframe>" selected="selected">Premier League
  <option value="<iframe src='http://www.tablesleague.com/iframe?width=232&height=430&font_name=Tahoma&position=1&font_size=12&team_link=1&link_color=404040&games=1&wins=1&draws=0&lost=0&goals=0&goals_against=0&gd=0&points=1&next=0&form=0&font_size=12&font_color=000000&bg_color=FFFFFF&header_font_color=FFFFFF&header_bg_color=1fb9e4&bg_col=1fb9e4&font_color_col=FFFFFF&highlight=e3e3e3&hover=fff6bf&league_header=1&league=l_474&team=&timezone=7&language=2&team_flags=0' width='232' height='430' frameborder='0' scrolling='no'></iframe>">Seria A
  <option value="BBVA">BBVA
  <option value="Bundes">Bundes
</select>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("mySelect").value;
  document.getElementById("mySelect").value = '';
  document.getElementById("demo").innerHTML = x;
}

document.getElementById("mySelect").addEventListener("change", myFunction);

myFunction();
</script>

The main issue you have here is that you're replacing the select tag's value with a value of ''. Removing the line where you do this in the javascript will effectively change the blank value you see when you load the page.

Though it's unclear, I think what you want to do is also have the select tag's change listener triggered when the page loads. You can do this by dispatching the event like so:

var evt = new Event('change');
document.getElementById('mySelect').dispatchEvent(evt);

The code you've provided, however, is a very sloppy way of achieving whatever it is you want to achieve.


Need Your Help

Joomla Akeeba Fatal error

joomla components upgrade

My client set auto-upgrade for a component "Smart form golder' component.

How can I use Drupal Services from Flash via AMFPHP (AS3)?

flash actionscript-3 drupal amfphp

What libraries or sample code will show me how to invoke Drupal services over AMFPHP from ActionScript? Ideally, they should be compatible with Flash, not just Flex.