0

私が持っている問題:

「追加」
をクリックします 2 番目のオプション
を選択します 「追加」をクリックします

問題 : 私の最初の選択リストの選択されたオプション インデックス = 0;
これは起こるべきではありませんが、とにかくなぜそれが起こるのかわかりません。誰が私が間違ったことを教えてもらえますか?

<script type="text/javascript">
function add(){
var div =document.getElementById('ruletemplate').cloneNode(true);

document.getElementById('rules').innerHTML += div.innerHTML;
return false;
}

</script>
<div id="ruletemplate" style="display: none;">
<div >
    <label for="rule">Rule</label>
    <select name="rules[][option]">
        <option>MAX PERS</option>
        <option>MIN PERS</option>
    </select>
    <input name="rule[][amount]" type="text"/>
</div>
</div>
<form>
<div  id="rules" >

</div>
<a id="addRule" href="" onclick="javascript: add(); return false;">add</a>
<input type="Submit" value="Save"  />
</form>
4

3 に答える 3

0

それが行われている理由は、すべてが再解析されることを意味する innerHTML を設定しているためです。代わりに、要素をコンテナに追加する必要があります。これを試して、各選択の位置を維持する必要があります。

function add(){
var div =document.getElementById('ruletemplate').cloneNode(true);
div.style.display='block';
document.getElementById('rules').appendChild(div);
return false;
}
于 2012-04-13T13:54:32.683 に答える
0

option 要素は、現在の選択状態をselectedjavascript プロパティで維持します (デフォルトの選択状態に対応する selected 属性と混同しないでください)。

これは複製されていないため、選択を手動で更新する必要があります

id注 -単一のドキュメントで s を複製することはできません。要素を複製すると、 idsが複製されます。

于 2012-04-13T13:47:31.977 に答える
0

一部のブラウザー (Firefox、Chrome など) では、DOM オブジェクト (値を含むテキスト入力と「select」属性を含む選択されたオプション) が更新されないため、innerHTML を呼び出すと、値のない元の構造が取得されます。

次のように、オブジェクトのDOM更新を強制する必要があります: http://dev-answers.blogspot.it/2007/08/firefox-does-not-reflect-input-form.html

于 2012-04-13T14:01:43.517 に答える