当前位置： 文江博客话题详情

Javascript - innerHTML 不适用于 HTML 选择菜单

发布于 2024-08-30 09:09:45 字数 869 浏览 2 评论 0原文

在我的 HTML 页面中，我有 2 个选择菜单，其 ID 为“月”和“日” - 页面加载时“日”为空，“月”有 12 个选项，其值 1-12 对应于一月至十二月。

“month”有一个 onchange 事件调用此函数：

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
}

（想象一下选项标签周围有大括号可以帮助您看到...）

我认为很清楚地看到我想要实现的目标...除了 ID 为“day”的选择的innerHTML之外，一切都工作正常“无论您选择哪个月份，都不会被填满。我知道问题出在函数的这个阶段，因为当我将要执行的 if、elseif 和 else 代码更改为警报或类似的代码时，它工作正常。

有谁知道innerHTML 的问题是什么？

谢谢

编辑：使用 Firefox 3.6

原文

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

"month" has an onchange event which 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 braces around the option tags to help you see...)

I think it's pretty clear to see what I'm trying to achieve...and everything works fine apart from the innerHTML of the select with ID "day" doesn't get filled at all, regardless of what month you pick. And I know the problem is with this stage of the function because when I change the if, elseif and else code-to-be-executed to alerts or something similar, it works fine.

Does anybody know what the problem with the innerHTML is?

Thanks

EDIT: Using Firefox 3.6

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（8）

墟烟 2024-09-06 09:09:46

我将概括和总结如下问题和对我有用的解决方案：

问题：

Javascript insideHTML 不再适用于选择的 HTML 元素。

描述：

用于动态分配 HTML 内容的标准 Javascript 语法 (document.getElementById().innerHTML=...) 不再适用于 select HTML 元素，因为（可能是全部）操作系统或最常用浏览器的未知版本；在选择元素上使用它会导致浏览器崩溃。

解决方案：

要将 HTML 内容动态分配给 HTML select 元素，而不是使用标准语法：

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

请使用以下语法：

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

I would generalize and summarize as follows the issue and the solution that worked for me:

Problem:

Javascript innerHTML not working on select HTML elements any more.

Description:

The standard Javascript syntax to dinamically assign HTML contents (document.getElementById().innerHTML=...) does not work any more on the select HTML elements since an unknown version of (probably all) either operating systems or most used browsers; using it on a select element causes the browser to crash.

Solution:

To dinamically assign HTML contents to an HTML select element, instead of using the 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>
    )
;
回复 原文
染火枫林 2024-09-06 09:09:46

这个怎么样：

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

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>
回复 原文
野却迷人 2024-09-06 09:09:45

我建议不要在select上使用innerHTML - 它只是
似乎是错误的。 select 元素具有易于使用的方法来添加新元素
选项：

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

上面的对象创建中的参数是：

new Option("optionText", "optionValue")

只是想添加到这个答案，因为它可能会让看到这篇文章的人澄清。

I would suggest simply not to use innerHTML on a select - it just
seems wrong. select elements have easy to use methods to add new
options:

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

the parameters in the above object creation are:

new Option("optionText", "optionValue")

Just wanted to add to this answer, because it might clarify to someone who get to this post.

回复 原文
凉城 2024-09-06 09:09:45

这是 IE 的一个已知问题。

包含解决方法的知识库文章：
http://support.microsoft.com/kb/276228

另外：欺骗：
innerHTML 替换不反映

编辑：这是我基于您的代码的工作示例：

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

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>
回复 原文
a√萤火虫的光℡ 2024-09-06 09:09:45

您不应该使用 innerHTML 来修改标签。您应该使用 removeChild(element); 和 appendChild(element);

首先，为了易读和编辑目的，在变量中设置选择框；

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);
}

因此，最后使用您的代码和我的代码，您将得到以下内容：

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);
    }
}

现在包括闰年！

You should not be using innerHTML to modify tags. You should be using removeChild(element); and appendChild(element);

First you set your select box in a variable for legibility and editing purposes;

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

Then you clear the select box

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

Finally you fill it again 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 your 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!

回复 原文
寂寞花火° 2024-09-06 09:09:45

另一种解决方案是使用 Jquery

$('#day').html('');

another solution is to use Jquery

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

回复 原文
撑一把青伞 2024-09-06 09:09:45

这是一个有点 hack，但它很小，并且可以在 FF 和 IE 中工作，作为 IE 无法更改所选元素上的 innerHTML 的解决方法。

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

This is a bit of a hack but it's tiny and works in both FF and IE as a workaround to IE's inability to change innerHTML on select elements.

function swapInnerHTML(objID,newHTML) {
  var el=document.getElementById(objID);
  el.outerHTML=el.outerHTML.replace(el.innerHTML+'</select>',newHTML+'</select>');
}
回复 原文
思慕 2024-09-06 09:09:45

我来到这个问题并想分享我的问题/答案希望它可以帮助其他人。

我有这个不起作用：

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

我将其更改为有效的：

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

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

I had this which did not work:

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

I changed it to this which did work:

function change_select() {
    var sel = document.getElementById('my-id');
    sel.innerHTML = 'option>new item</option>';
}
回复 原文
~没有更多了~

关于作者

挥剑断情

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

花开柳相依

文章 0 评论 0

zyhello

文章 0 评论 0

故友

文章 0 评论 0

对风讲故事

文章 0 评论 0

Oo萌小芽oO

文章 0 评论 0

梦明

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文