3

ユーザーに国リストから国を選択してもらいたい。そして、1 つの国が選択されると、list1 から消えて list2 に移動します。動作する私のコードは次のとおりです。

Select countries:<br>
<div name="a1" id="a1"><a style="cursor:pointer" onClick="document.getElementById('f1').style.display='block';addcnt('Bulgaria');">Bulgaria</a><br></div>
<div name="a2" id="a2"><a style="cursor:pointer" onClick="document.getElementById('f2').style.display='block';addcnt('Russia');">Russia</a><br></div>

Selected countries:<br>
<div name="f1" id="f1" style="display: none;"><img  style="cursor:pointer" onClick="document.getElementById('f1').style.display='none';document.getElementById('a1').style.display='block';" src='images/delete.png' /><img src='images/flags/bg.jpg' />Bulgaria</div>
<div name="f2" id="f2" style="display: none;"><img  style="cursor:pointer" onClick="document.getElementById('f2').style.display='none';document.getElementById('a2').style.display='block';" src='images/delete.png' /><img src='images/flags/ru.jpg' />Russia</div>

そしてJavaScript：

<script>
$("#a1").click(function ( event ) {
event.preventDefault();
$(this).hide();
});
$("#a2").click(function ( event ) {
event.preventDefault();
$(this).hide();
});
</script>

これが作業部分です。したがって、この国をリストに表示し、非表示で動的に表示し、リストをcomasで区切る必要があります.Hereは次のとおりです。

<div id='countriesvb' style='display:none;'>
<p><b>Countries you've selected</b></p>
</div>
<br /><br />
<form method='post' name='frm'>
<input type='hidden' name='countries' id='countries' value=''>
</form>

「addcnt」というjavascript関数でリストを作ろうとしたのですが、何かがうまくいきません。これが機能です

function addcnt(ps)
{
var cylist = document.frm.countries.value;
document.frm.countries.value = cylist + ',' + ps;
var khs = document.getElementById('countriesvb').innerHTML;
document.getElementById('countriesvb').style.display = 'block';
document.getElementById('countriesvb').innerHTML = khs + ps + \"<br />\";
}

問題を見つけるのを手伝ってもらえますか?

4

1 に答える 1

1

あなたの最後のステートメントのため、それは機能していません:

document.getElementById('countriesvb').innerHTML = khs + ps + \"<br />\";

すべてのdivを置き換え、divの最後にテキストを挿入しようとしています。

このhtmlコードをcountriesvb divに追加してみてください:

<div id='countriesvb' style='display:none;'>
    <p>
        <b>Countries you've selected</b>
    </p>
    <span id="selected-countries"></span> *** you should to add this span.
</div>

代わりにこの関数を試してください: 入力に値を追加し、新しいスパンを使用して値を表示しました

function addcnt(ps)
{
    document.frm.countries.value = !document.frm.countries.value ? ps : document.frm.countries.value + "," + ps;
    var khs = document.frm.countries.value;
    document.getElementById('countriesvb').style.display = 'block';
    document.getElementById('selected-countries').innerHTML = khs;
}

ここに実例があります:
jsFiddle

于 2013-09-15T17:56:26.533 に答える