我有一个选择下拉列表,在页面加载时选择了1个项目。
<select name = "options">
<option value = "1">Item1</option>
<option value = "2" selected>Item2</option>
<option value = "3">Item3</option>
<option value = "4">Item4</option>
</select>
现在我想在用户按下shift并选择其他选项(如“第3项”)时捕获新的选择选项。
我有以下代码来查找列表中的所有选择
var value = "";
for (var intLoop = 0; intLoop < Form.elements[index].length; intLoop++) {
if(Form.elements[index][intLoop].selected )
value = value + Form.elements[index][intLoop].value;
}
我可以看到选择了“第2项”和“第3项”,但我只想获得“第3项”。可能吗?
答案 0 :(得分:3)
以下代码将告诉您已选择的内容以及取消选择的内容http://jsfiddle.net/8dWzB/
它使用Array.prototype.indexOf
,这不是最快的方法。但它应该让你朝着正确的方向前进。
<强> HTML 强>
<select id="options" multiple="multiple">
<option value = "1">Item1</option>
<option value = "2" selected>Item2</option>
<option value = "3">Item3</option>
<option value = "4">Item4</option>
</select>
<强> JS 强>
function getSelectedIndexes(select) {
var selected = [];
for (var i = 0; i < select.options.length; i++) {
if(select.options[i].selected ) {
selected.push(i);
}
}
return selected;
}
var select = document.getElementById("options");
var prevSelected = getSelectedIndexes(select);
select.onchange = function(e) {
var currentlySelected = getSelectedIndexes(this);
for (var i =0; i < currentlySelected.length; i++) {
if (prevSelected.indexOf(currentlySelected[i]) == -1) {
console.log("Added to selection ", this.options[currentlySelected[i]].text);
}
}
for (var i =0; i < prevSelected.length; i++) {
if (currentlySelected.indexOf(prevSelected[i]) == -1) {
console.log("Removed from selection ", this.options[prevSelected[i]].text);
}
}
prevSelected = currentlySelected;
};
如果您真的只想知道上次点击了哪个项目,可以使用以下代码。我将使用jQuery,因此我可以轻松地在所有选项对象上设置处理程序。请记住,如果您使用键盘更改选择
,这将不起作用 $('option').click(function(e){
var parentNode = this.parentNode;
for (var i=0; i < this.parentNode.options.length; i++) {
if (parentNode.options[i] == this) {
console.log('Clicked item with index', i);
break;
}
}
});
答案 1 :(得分:1)
您可以在更改事件(例如,选择项目1和2)之前检查所选选项的值,然后在事件之后再次检查(例如,选择项目1,2和3),并比较差异。
这是一个例子。
在这里小提琴:http://jsfiddle.net/FnAuz/4/
我修改了你的select
以允许多项选择,因为我认为这是问题的症结所在。
HTML:
<form id="my-form">
<select name = "options" id="options" multiple>
<option value = "val1">Item1</option>
<option value = "val2">Item2</option>
<option value = "val3">Item3</option>
<option value = "val4">Item4</option>
</select>
</form>
JS:
var oldValue = "";
document.getElementById('options').onchange = function() {
var myForm = document.getElementById ('my-form');
var value = "";
for (var intLoop = 0; intLoop < myForm.elements[0].length; intLoop++) {
if(myForm.elements[0][intLoop].selected) {
value = value + myForm.elements[0][intLoop].value;
}
}
for (var intLoop = 0; intLoop < myForm.elements[0].length; intLoop++) {
var optionVal = myForm.elements[0][intLoop].value;
if(myForm.elements[0][intLoop].selected && value.indexOf(optionVal) !== -1 && oldValue.indexOf(optionVal) === -1) {
console.log('Last clicked was ' + myForm.elements[0][intLoop].value)
}
}
oldValue = value;
};
编辑:我刚注意到我的示例在用户进行命令/控制选择时有效,但如果他们进行了班次选择,则所有新值都将被计为“最后点击的项目” 。所以我的代码需要一些工作来解释这个场景。我没时间了,但希望我的代码在其当前状态下仍然有用!
答案 2 :(得分:0)
它看起来很乱,所以我把它作为答案发布:
<html>
<head>
<script type="text/javascript">
<!--
var value = '0';
document.getElementById('options').onchange = function() {
value = parseInt(value) + parseInt(this.value);
alert(value);
}
-->
</script>
</head>
<body>
<select name="options" id="options">
<option value = "1">Item1</option>
<option value = "2" selected>Item2</option>
<option value = "4">Item3</option>
<option value = "8">Item4</option>
</select>
</body>
</html>
选择多个项目的版本: 好吧,如果你想累积项目,你可以为每个产品分配二进制ID,然后你可以从总数中提取所有选定的产品。例如,如果总数为:7,您可以轻松将其翻译为二进制字符串“111”,这意味着他们选择了项目1,2,4。听起来有点疯狂,我知道,只是一个想法;)
答案 3 :(得分:0)
试试这个:
var e = document.getElementById("ID_of_Select_Element");
var _selectedValue= e.options[e.selectedIndex].value;