All geek questions in one place

Javascript - innerHTML does not work with HTML select menu

On my HTML page, I have 2 selection menus with the identifiers "month" and "day" - "day" is empty when the page loads, the "month" has 12 options with values ​​1-12 corresponding to January-December.

"month" has an onchange event that calls this function:

function showOutboundDays(month) { if(month==4 || month==6 || month==9 || month==11) document.getElementById('day').innerHTML='<option value="1">1</option><option value="2">2</option>'; etc. up to 30 else if(month==2) document.getElementById('day').innerHTML='<option value="1">1</option>'; etc. up to 28 else document.getElementById('day').innerHTML='<option value="1">1</option>'; etc. up to 31 }

(just imagine there are brackets around option tags to help you see ...)

I think it’s pretty clear to see what I'm trying to achieve ... and everything works fine, except for the innerHTML of choice with the identifier "day", it does not fill at all, no matter what month you choose. And I know that the problem is related to this stage of the function, because when I change the if, elseif and else code to execute warnings or something like that, it works fine.

Does anyone know what the problem is with innerHTML?

thanks

EDIT: Using Firefox 3.6

+4
source share
8 answers

This is a known issue for IE.

KB article with workaround: http://support.microsoft.com/kb/276228

Also: dupe of: innerHTML replace does not reflect

EDIT: Here is my working sample based on your code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Selects</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> <style rel="stylesheet" type="text/css"> </style> <script> function showOutboundDays(month) { if(month==4 || month==6 || month==9 || month==11) document.getElementById('day').innerHTML='<option value="1">1</option><option value="2">2</option>'; else if(month==2) document.getElementById('day').innerHTML='<option value="1">3</option><option value="1">4</option>'; else document.getElementById('day').innerHTML='<option value="1">5</option><option value="1">6</option>'; } </script> </head> <body> <select onchange="showOutboundDays(this.value);"> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> <br /> <select id="day"> </select> </body> </html>
+4
source

I would suggest just not using innerHTML on select - it just seems wrong. Select elements have easy-to-use methods for adding new parameters:

 `document.getElementById('day').options.add(new Option("1", "1"))`

parameters in the object creation created above:

 new Option("optionText", "optionValue")

I just wanted to add to this answer, because it can clarify who gets to this post.

+10
source

You cannot use innerHTML to modify tags. You should use removeChild(element); and appendChild(element);

First, you set the selection field in a variable for readability and editing;

 var select = document.getElementById('days');

Then you clear the selection box

 while ( select.childNodes.length >= 1 ) { select.removeChild(select.firstChild); }

Finally, you again fill it with the appropriate values

 for(var i=1;i<=days;i++) { newOption = document.createElement('option'); newOption.value=i; newOption.text=i; select.appendChild(newOption); }

So, at the end with the code and my code here you get the following:

 function showOutboundDays(month, year) { var days=null; if(month==4 || month==6 || month==9 || month==11) days=30; else if(month==2) { //Do not forget leap years!!! if(year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) //Provided by Justin Gregoire { days=29; } else { days=28; } } else days=31; var select = document.getElementById('days'); while ( select.childNodes.length >= 1 ) { select.removeChild(select.firstChild); } for(var i=1;i<=days;i++) { newOption = document.createElement('option'); newOption.value=i; newOption.text=i; select.appendChild(newOption); } }

Leap years are now included!

+5
source

This is a bit hacky, but it is tiny and works in both FF and IE as a workaround to IE's inability to change innerHTML to individual elements.

 function swapInnerHTML(objID,newHTML) { var el=document.getElementById(objID); el.outerHTML=el.outerHTML.replace(el.innerHTML+'</select>',newHTML+'</select>'); }
+1
source

Another solution is to use jQuery

$('#day').html('<option value="1">1</option><option value="2">2</option>');

0
source

I came to this question and wanted to share my problem / answer, hoping this could help others.

I did not succeed:

 function change_select() { var sel = document.getElementById('my-id').innerHTML; sel = '<option>new item</option>'; }

I changed it to what worked:

 function change_select() { var sel = document.getElementById('my-id'); sel.innerHTML = 'option>new item</option>'; }
0
source

I would summarize and summarize the following problem and solution that worked for me:

Problem:

Javascript innerHTML no longer works on individual HTML elements.

Description:

The standard Javascript syntax for dynamically assigning HTML content ( document.getElementById().innerHTML=... ) no longer works on select elements, since an unknown version (possibly all) of either the operating systems or the most commonly used browsers; using it on the select element causes the browser to crash.

Decision:

To dynamically assign HTML content to an HTML select element instead of using standard syntax:

 document.getElementById(HTML_select_element_id).innerHTML = <HTML contents to assign>

use this syntax:

 var select = document.getElementById(HTML_select_element_id); select.outerHTML = select.outerHTML.replace( select.innerHTML , <HTML contents to assign> ) ;
0
source

How about this:

 <div style="display:inline" id=A><select>...</select></div A> <script> obj = document.getElementById("A"); newSel = "<select><option>New 1</select>"; obj.innerHTML = newSel; </script>
-1
source

Source: https://habr.com/ru/post/1308369/

More articles:


All Articles