Question

我把这两个下拉列表编码在一起。一个是国家，一个是空的。当您单击某个国家/地区并按添加时，该国家/地区将移至空白下拉列表。您可以根据需要多次执行此操作。

但是在提交表单时我无法访问第二个下拉列表的帖子数据。这是我的代码：

JavaScript的：

function moveData(dir) {
var sF = document.getElementById(((dir == "back")?"destinationSelect":"sourceSelect"));
var dF = document.getElementById(((dir == "back")?"sourceSelect":"destinationSelect"));
if(sF.length == 0 || sF.selectedIndex == -1) return;
while (sF.selectedIndex != -1) {
    dF.options[dF.length] = new Option(sF.options[sF.selectedIndex].text, sF.options[sF.selectedIndex].value);
    sF.options[sF.selectedIndex] = null;
}
}

HTML：

<select name="sourceSelect[]" id="sourceSelect" size="5"  ondblclick="moveData(); return false;">
<optgroup label="North America">
    <option value="NORTHAMERICA_UNITEDSTATES">United States</option>
    <option value="NORTHAMERICA_BAHAMAS">Bahamas</option>
    <option value="NORTHAMERICA_BARBADOS">Barbados</option>
    <option value="NORTHAMERICA_BELIZE">Belize</option>
    <option value="NORTHAMERICA_CANADA">Canada</option>
    <option value="NORTHAMERICA_COSTARICA">Costa Rica</option>
    <option value="NORTHAMERICA_CUBA">Cuba</option>
</select>   

<input type="submit" name="forward" id="button" value=">>>>" onclick="moveData(); return false;"/>
<input type="submit" name="back" id="button" value="<<<<" onclick="moveData('back'); return false;"/>

<select name="destinationSelect[]" id="destinationSelect" size="5" ondblclick="moveData('back'); return false;">

所以，是的，我不确定如何在表单提交时发布第二个下拉列表或者我需要输入什么来查看它。像echo $ _POST ['destinationSelect []']不起作用。

Answer 1

提交表单时，不会发送select元素中可用的值，只有选定的值。

我在这里看到两个选择：

在第二个框中添加项目并自动选择它。很丑，但它确实有效，除非用户“取消选择”这个项目。不过，我不是你这样做的。
创建隐藏字段以保存项目的值。当您将项目“移动”到第二个select时，您还会将其添加到隐藏字段的值中。这种实现更好，因为无论用户弄乱第二个select它都会起作用（它将作为可视组件，但不会做实际工作）。

Answer 2

当您提交表单时，您需要选择第二个（选定）字段中的所有项目;

    <input name="Submit" type="submit" value="submit"  onclick="selectAllOptions('destinationSelect');" />

然后是javascript;

function selectAllOptions(selStr)   {
    var selObj = document.getElementById(selStr);
    for (var i=0; i<selObj.options.length; i++) {
        selObj.options[i].selected = true;
    }
}

否则他们在那里但没有被选中

如何在下拉列表中发布所有选项

2 个答案: