5

私の HTML ページには、「月」と「日」という ID を持つ 2 つの選択メニューがあります。「日」は、ページの読み込み時に空です。「月」には、1 月から 12 月に対応する 1 ～ 12 の値を持つ 12 のオプションがあります。

「月」には、次の関数を呼び出す 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の使用

4

8 に答える 8

16

innerHTML を a で使用しないことをお勧めしますselect-それは間違っているようです。select要素には、新しいオプションを追加するための使いやすいメソッドがあります。

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

上記のオブジェクト作成のパラメーターは次のとおりです。

new Option("optionText", "optionValue")

この投稿にたどり着いた人には明確になるかもしれないので、この回答に追加したかっただけです。

于 2010-04-29T14:57:19.427 に答える
5

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

うるう年が含まれるようになりました！

于 2010-04-29T15:06:08.113 に答える
5

これはIEの既知の問題です。

回避策のあるKB記事： http ：//support.microsoft.com/kb/276228

また：重複： innerHTMLreplaceは反映されません

編集：これがあなたのコードに基づいた私の作業サンプルです：

<!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>
于 2010-04-29T14:49:59.410 に答える
1

別の解決策は、Jqueryを使用することです

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

于 2014-10-21T09:30:22.367 に答える
1

これはちょっとしたハックですが、小さなものであり、FF と IE の両方で機能し、IE が select 要素の innerHTML を変更できないことを回避します。

function swapInnerHTML(objID,newHTML) {
  var el=document.getElementById(objID);
  el.outerHTML=el.outerHTML.replace(el.innerHTML+'</select>',newHTML+'</select>');
}
于 2012-09-27T07:47:10.073 に答える
0

私は、問題と私のために働いた解決策を次のように一般化して要約します。

問題：

選択した HTML 要素で Javascript の innerHTML が機能しなくなりました。

説明：

HTML コンテンツを動的に割り当てる標準の Javascript 構文 ( ) は、選択しdocument.getElementById().innerHTML=...た HTML 要素では機能しなくなりました。これは、オペレーティング システムまたはほとんどの使用されているブラウザーのいずれか (おそらくすべて) のバージョンが不明であるためです。select 要素で使用すると、ブラウザがクラッシュします。

解決：

標準構文を使用する代わりに、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>
    )
;
于 2016-06-16T08:43:58.890 に答える
-1

これはどう：

<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>
于 2016-01-28T00:57:34.287 に答える