3

我希望我的用户从国家列表中选择国家。当一个国家被选中时，它会从 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>

这是工作部分。所以我希望这个国家在一个列表中，以隐藏的方式动态显示，并且列表用逗号分隔。这里是：

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