Javascript选择多个选项
我有一个带有选择框的表单,可以选择多个选项。用户保存这些选项后,会将它们存储在数据库表中 然后,我可以读取此数据库表以获得他们再次选择的选项。我需要能够从数据库中获取这些数据,将其放入一个数组中,然后在选择框中的选项在它们进入“编辑”选项时被预先选择 将数据读入数组很好,我知道如何在选择框中选择单个选项,但是我不确定如何处理javascript中选择的多个选项Javascript选择多个选项,javascript,forms,html-select,options,Javascript,Forms,Html Select,Options,我有一个带有选择框的表单,可以选择多个选项。用户保存这些选项后,会将它们存储在数据库表中 然后,我可以读取此数据库表以获得他们再次选择的选项。我需要能够从数据库中获取这些数据,将其放入一个数组中,然后在选择框中的选项在它们进入“编辑”选项时被预先选择 将数据读入数组很好,我知道如何在选择框中选择单个选项,但是我不确定如何处理javascript中选择的多个选项 有人能帮我找出完成这项工作所需的javascript吗?这类工作应该在服务器端完成,以限制客户端用于此类琐碎任务的资源量。也就是说,如果
有人能帮我找出完成这项工作所需的javascript吗?这类工作应该在服务器端完成,以限制客户端用于此类琐碎任务的资源量。也就是说,如果你在前端做这件事,我会鼓励你考虑使用一些代码来保持代码简洁明了:
var values = ["Red", "Green"],
colors = document.getElementById("colors");
_.each(colors.options, function (option) {
option.selected = ~_.indexOf(values, option.text);
});
如果您使用的是jQuery,它可能会更简洁:
var values = ["Red", "Green"];
$("#colors option").prop("selected", function () {
return ~$.inArray(this.text, values);
});
如果不使用underline.js或jQuery这样的工具,您将需要编写更多的内容,并且可能会发现它有点复杂:
var color, i, j,
values = ["Red", "Green"],
options = document.getElementById("colors").options;
for ( i = 0; i < values.length; i++ ) {
for ( j = 0, color = values[i]; j < options.length; j++ ) {
options[j].selected = options[j].selected || color === options[j].text;
}
}
var color,i,j,
值=[“红色”、“绿色”],
options=document.getElementById(“颜色”).options;
对于(i=0;i
纯javascript解决方案
<select id="choice" multiple="multiple">
<option value="1">One</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<script type="text/javascript">
var optionsToSelect = ['One', 'three'];
var select = document.getElementById( 'choice' );
for ( var i = 0, l = select.options.length, o; i < l; i++ )
{
o = select.options[i];
if ( optionsToSelect.indexOf( o.text ) != -1 )
{
o.selected = true;
}
}
</script>
一个
二
三
var optionsToSelect=['One','three'];
var select=document.getElementById('choice');
对于(var i=0,l=select.options.length,o;i
尽管我同意这应该在服务器端完成。您可以通过进入
document.getElementById(“cars”).options来访问所选对象的选项数组,其中“cars”是所选对象
一旦你有了它,你就可以调用选项[i].setAttribute('selected','selected')
选择一个选项
我同意其他人的看法,您最好使用服务器端。
<script language="JavaScript" type="text/javascript">
<!--
function loopSelected()
{
var txtSelectedValuesObj = document.getElementById('txtSelectedValues');
var selectedArray = new Array();
var selObj = document.getElementById('selSeaShells');
var i;
var count = 0;
for (i=0; i<selObj.options.length; i++) {
if (selObj.options[i].selected) {
selectedArray[count] = selObj.options[i].value;
count++;
}
}
txtSelectedValuesObj.value = selectedArray;
}
function openInNewWindow(frm)
{
// open a blank window
var aWindow = window.open('', 'Tutorial004NewWindow',
'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');
// set the target to the blank window
frm.target = 'Tutorial004NewWindow';
// submit
frm.submit();
}
//-->
</script>
The HTML
<form action="tutorial004_nw.html" method="get">
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<td valign="top">
<input type="button" value="Submit" onclick="openInNewWindow(this.form);" />
<input type="button" value="Loop Selected" onclick="loopSelected();" />
<br />
<select name="selSea" id="selSeaShells" size="5" multiple="multiple">
<option value="val0" selected>sea zero</option>
<option value="val1">sea one</option>
<option value="val2">sea two</option>
<option value="val3">sea three</option>
<option value="val4">sea four</option>
</select>
</td>
<td valign="top">
<input type="text" id="txtSelectedValues" />
selected array
</td>
</tr>
</table>
</form>
HTML
零海
海一号
第二海
海三号
海四号
选定阵列
基于@Peter Baley answer,我创建了一个更通用的函数:
@objectId: HTML object ID
@values: can be a string or an array. String is less "secure" (should not contain repeated value).
function checkMultiValues(objectId, values){
selectMultiObject=document.getElementById(objectId);
for ( var i = 0, l = selectMultiObject.options.length, o; i < l; i++ )
{
o = selectMultiObject.options[i];
if ( values.indexOf( o.value ) != -1 )
{
o.selected = true;
} else {
o.selected = false;
}
}
}
@objectId:HTML对象ID
@值:可以是字符串或数组。字符串不太“安全”(不应包含重复值)。
函数检查多值(objectId、值){
选择multiobject=document.getElementById(objectId);
对于(变量i=0,l=selectMultiObject.options.length,o;i
示例:checkMultiValues('thismultithtmlobject','a,b,c,d')代码>我已经有了选择表单,我正在寻找一个javascript解决方案来自动选择。表单的每个其他部分都使用javascript,我只是不确定如何使用javascript代码选择多个选项。在服务器端这样做更有意义,并且最终还是会为客户端代码生成一个数组服务器端。服务器端这样做更有意义,但我不想重做已经完成的所有事情。之前的开发人员使用了所有javascript,因此我将坚持使用它。这里的JS可以简化,并且有一个错误-HTML值是大写的,而选择的变量不是,这意味着此代码不会选择任何内容。固定版本:@ChrisMoschini这个答案已经有很多年了,但我很高兴再次将它带到表面,这样我就可以刷新它的内容。这也是一个不错的解决方案,尽管您可以将其缩短:)请参见上面我的答案。这很接近,但是存储的值不是选项的“索引”,而是选项的值。值得注意的是,直到版本9,IE中才提供Array.prototype.indexOf
。非常感谢。我会将它与o.value一起使用,而不是与o.text一起使用,但是效果很好。您好,您能再解释一下您的循环吗?我不太明白。您能发布一个JSFIDLE吗?请,我想我也会这样做,但它不起作用。o.selected=(values.indexOf(o.value)!=-1)
将使if
-块过时。