Question

我希望我的用户从国家/地区列表中选择国家/地区。当选择一个国家/地区时，它会从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分隔。这是：

<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 />\";
}

你能帮我找到问题吗？

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

并尝试此功能：我只是在输入中添加了值，然后使用新的span来显示值

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

自动显示列表的Jquery函数

1 个答案: