Javascript значение опции при загрузке на странице

Question

Я застрял на этом и могу воспользоваться помощью любого.

Мой вопрос: как загрузить значение по умолчанию в элемент выбора при открытии страницы?

Другими словами, при первой загрузке страницы элемент выбора уже имеет выбранную опцию, без необходимости взаимодействия с ней. В противном случае, если пользователь хочет выбрать что-то еще, они могут использовать элемент выбора обычно для других параметров.

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

Answer 1

У вас есть значение, выбранное с помощью атрибута selected на вашем HTML.

С

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

вы вытирают текущее значение. Попробуйте удалить эту строку.

Answer 2

Попробуйте этот код:

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

Answer 3

Основной проблемой вы здесь является то, что вы заменяете ценность select тега со значением ''. Удаление строки, в которой вы делаете это в javascript, будет эффективно изменять пустое значение, которое вы видите при загрузке страницы.

Хотя неясно, я думаю, что вы хотите сделать, также есть select тег change прослушиватель, запускаемый при загрузке страницы. Вы можете сделать это, отправляющий событие так:

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

код вы предоставили, однако, является очень неаккуратно способ достижения то, что вы хотите достичь.