Javascript-innerHTML不使用HTML选择菜单_Javascript_Innerhtml

Javascript-innerHTML不使用HTML选择菜单

javascript

Javascript-innerHTML不使用HTML选择菜单,javascript,innerhtml,Javascript,Innerhtml,在我的HTML页面中，我有两个选择菜单，ID为month和day，当页面加载时day为空，month有12个选项，值为1-12，对应于一月到十二月 month具有调用此函数的onchange事件： function showOutboundDays(month) { if(month==4 || month==6 || month==9 || month==11) document.getElementById('day').innerHTML='<option value="1"

在我的HTML页面中，我有两个选择菜单，ID为month和day，当页面加载时day为空，month有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选择日的innerHTML之外，一切都很好，无论你选择哪个月，都不会被填满。我知道函数的这个阶段存在问题，因为当我将要执行的if、elseif和else代码更改为警报或类似的代码时，它工作正常

有人知道innerHTML有什么问题吗

谢谢

编辑：使用Firefox 3.6这是IE的一个已知问题

KB文章及其解决方法：

另外：复制：

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

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

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

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

上述对象创建中的参数包括：

new Option("optionText", "optionValue")

我只是想补充一下这个答案，因为它可能会澄清到这个职位的人

不应使用innerHTML修改标记。您应该使用removeChildelement；和附加元素

首先，为了便于阅读和编辑，在变量中设置选择框

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

闰年现在包括在内

这是一个小技巧，但它很小，在FF和IE中都可以作为IE无法更改选定元素的innerHTML的解决方案

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

另一个解决方案是使用Jquery

$'day'.html'12'

我想到这个问题，想与大家分享我的问题/答案，希望它能帮助其他人

我有一个不起作用的问题：

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

这个怎么样：

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

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

问题:

Javascript innerHTML不再处理select HTML元素

说明：

用于动态分配HTML内容document.getElementById.innerHTML=。。。由于可能是所有操作系统或最常用的浏览器的未知版本，因此无法再处理选定的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>
    )
;

对不起，我应该加上，我使用的是Firefox。你可以编辑你的文章，突出显示代码，然后单击编辑器中的代码图标，这样大括号就可以正确通过了。需要知道你到底想做什么。我测试了你的代码，在我删除了你的评论并在if/else中为每行添加了分号后，它在Firefox中对我有效。如果你仍然需要，我可以发布我修改的内容，但我推荐RoToRa的答案，而不是使用innerHTML，特别是由于innerHTML在IEF中不起作用，您是否能够发布我的代码版本以及您的修改？正如我刚刚尝试过的那样，在去掉评论和添加分号之后，就像你说的那样，它仍然不起作用！ThanksUse newOption.text优先于innerHTML。更可靠，避免HTML转义问题。您可能希望检查闰年的逻辑-它们大约每4年发生一次。如果年份%400==0 | | |年份%4==0&&year%100！=0天=29天；其他天数=28天；谢谢你为我指出并找到它！修改了我的代码并留下了应得的积分。嗨，乔纳森，谢谢你的帮助-我试着输入代码，但不幸的是，我只得到了几天的空选择框。不太清楚发生了什么，我正在OSX上使用Firefox 3.6，如果这有什么不同的话。我的问题是innerHtml和innerHtml：