JavaScript 捕获 PHP 的所有列表框值
javascript capture all listbox values for php
我有一个页面,让人们可以将项目分配给一个类别和javascript,允许用户根据需要将任意数量的项目从左侧的一个框移动到右侧和返回的一个框,以便用户可以预览和微调选择(最终在右框中)。 如果项目可以在列表而不是列表框之间移动可能会更好,但我想选择框非常适合选择 uponclick。 用户完成后,我需要将右框中的项目发布到 php 脚本。 但是,我无法弄清楚如何捕获正确列表中的所有项目。 脚本中没有表单,因此无法从 document.form 获取它。 项目并没有真正被选中,它们只是填充列表,我想把它们全部拿走。 是否有包含整个列表的变量? 脚本很长,所以这里有一些可以工作的函数。本质上,我需要一种方法来写出末尾右框中的元素列表。 感谢您的任何建议。
function moveToRightOrLeft(side) {
var listLeft = document.getElementById('selectLeft');
var listRight = document.getElementById('selectRight');
if (side == 1) {
if (listLeft.options.length == 0) {
alert('You have already assigned all items to the category');
return false;
} else {
var selectedItem = listLeft.options.selectedIndex;
move(listRight, listLeft.options[selectedItem].value, listLeft.options[selectedItem].text);
listLeft.remove(selectedItem);
if (listLeft.options.length > 0) {
listLeft.options[0].selected = true;
}
}
} else if (side == 2) {
if (listRight.options.length == 0) {
alert('The list is empty');
return false;
} else {
var selectedItem = listRight.options.selectedIndex;
move(listLeft, listRight.options[selectedItem].value, listRight.options[selectedItem].text);
listRight.remove(selectedItem);
if (listRight.options.length > 0) {
listRight.options[0].selected = true;
}
}
}
}
function move(listBoxTo, optionValue, optionDisplayText) {
var newOption = document.createElement("option");
newOption.value = optionValue;
newOption.text = optionDisplayText;
listBoxTo.add(newOption, null);
return true;
}
首先,我认为您的语法有误。若要获取选择框的选定项的值,应使用如下内容:
var value = listLeft.options[listLeft.selectedIndex].value;
要写出特定选择框中的所有选项,您应该能够执行以下操作:
var options = document.getElementById('selectRight').options;
for (i=0; i<options.length(); i++)
document.write("value "+ i +" = "+ options[i].value);
<小时 />我稍微修改了一下您的代码,这是一个完整的工作示例:
<html>
<head>
<style type="text/css">
select
{
width:100px;
}
</style>
<script type="text/Javascript">
function moveToRightOrLeft(side)
{
if (side == 1)
{
var list1 = document.getElementById('selectLeft');
var list2 = document.getElementById('selectRight');
}
else
{
var list1 = document.getElementById('selectRight');
var list2 = document.getElementById('selectLeft');
}
if (list1.options.length == 0)
{
alert('The list is empty');
return false;
}
else
{
var selectedItem = list1.options[list1.selectedIndex];
move(list2, selectedItem.value, selectedItem.text);
list1.remove(list1.selectedIndex);
if (list1.options.length > 0)
list1.options[0].selected = true;
}
return true;
}
function move(listBoxTo, optionValue, optionDisplayText)
{
var newOption = document.createElement("option");
newOption.value = optionValue;
newOption.text = optionDisplayText;
listBoxTo.add(newOption, null);
return true;
}
function showContents(listBoxID)
{
var options = document.getElementById(listBoxID).options;
for (var i = 0; i < options.length; i++)
alert("Option "+ options[i].value +" = "+ options[i].text);
}
</script>
</head>
<body>
<select id="selectLeft" multiple="multiple">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>
<button onclick="moveToRightOrLeft(2)"><</button>
<button onclick="moveToRightOrLeft(1)">></button>
<select id="selectRight" multiple="multiple">
</select>
<button onclick="showContents('selectRight')">Show Contents</button>
</body>
</html>
相关文章:
- 参数列表Three.js之后的未捕获语法错误:缺少)
- 参数列表后缺少未捕获的语法错误)
- 在JavaScript中捕获select(下拉列表)上的键输入
- 未捕获的类型错误:对象#<节点列表>没有方法'addEventListener'
- 参数列表后的未捕获语法错误:缺少)
- 建议列表捕获用户输入延迟
- 参数列表[Javascript语法错误]后的未捕获语法错误:缺少)
- 选择列表元素(捕获向下/向上箭头)
- HTML 下拉列表无法捕获 onChange() 如果下拉列表中只有一个值使用 javascript
- 未捕获的引用错误:包含列表中值的警报框
- 如何在 DOM 中循环浏览输入范围滑块列表并使用每个循环捕获值
- jQuery 自动完成 - 当值类型不在建议列表中时捕获
- Jquery:未捕获的语法错误:缺少参数列表之后的 )
- “未捕获的语法错误:参数列表后缺少 )”
- Javascript 未捕获的语法错误:参数列表后缺少 )
- 单击时捕获浏览器缓存的数据下拉列表
- 如何从同一页面上的多个选择下拉列表中捕获值
- JavaScript 捕获 PHP 的所有列表框值
- 未捕获的语法错误:) 在 MVC 应用程序 JavaScript asp.net 参数列表后丢失
- 添加将列表项添加到<选择> jQuery 时要捕获的事件