>我最近试图制作一个带有多选框的表单。当有人选择选项时,所选选项的数量将显示在另一个文本上。我是JavaScript的初学者。
将调用该函数,但不计算所选选项的数量。
<select name="element_17_1[ ]"
size="7" multiple="multiple"
class="element select medium"
id="element_17_1[ ]"
onfocus="selectCount(this.form);"
onClick="selectCount(this.form);"
>
<option value="Opt1">Opt1</option>
<option value="Opt2">Opt2</option>
<option value="Opt3">Opt3</option>
<option value="Opt4">Opt4</option>
<option value="Opt5">Opt5</option>
<option value="Opt6">Opt6</option>
<option value="Opt7">Opt7</option>
</select>
这是我在<head>
中尝试的功能
function selectCount(f) {
var selObj = myForm.elements['element_17_1[]'];
var totalChecked = 0;
for (i = 0; i < selObj.options.length; i++) {
if (selObj.options[i].selected) {
totalChecked++;
}
}
f.element_9.value = totalChecked;
}
您正在尝试获取名为 element_17_1[]
的元素,但您的选择框名为 element_17_1[ ]
。 JavaScript 只是将名称视为一堆字符,而这个空格会有所不同。
在你的HTML中,你有:
> <select name="element_17_1[ ]"
> size="7" multiple="multiple"
> class="element select medium"
> id="element_17_1[ ]"
> onfocus="selectCount(this.form);"
> onClick="selectCount(this.form);"
> >
请注意,在侦听器中,this
引用元素本身,因此只需传递它:
onfocus="selectCount(this);"
onClick="selectCount(this);"
因此,对元素的引用直接传递给函数,可以是:
function selectCount(selObj) {
// The following line isn't needed now
// var selObj = myForm.elements['element_17_1[]'];
var totalChecked = 0;
for (i = 0; i < selObj.options.length; i++) {
totalChecked += selObj.options[i].selected? 1 : 0;
}
// The next line needs the form, so
selObj.form.element_9.value = totalChecked;
}
现在你不在乎选择元素叫什么了。
编辑
要单击element_9
您可以执行以下操作:
<input name="element_9" onclick="
this.value = selectCount(this.form['element_17_1[ ]']);
">
然后将函数修改为:
function selectCount(selObj) {
var totalChecked = 0;
for (i = 0; i < selObj.options.length; i++) {
totalChecked += selObj.options[i].selected? 1 : 0;
}
return totalChecked;
}
现在作业够了。
更改选择的名称name="element_17_1"
和 id id="element_17_1"
,并且您的函数中也没有myForm
,因此应该var selObj = myForm.elements['element_17_1'];
var selObj = f.elements['element_17_1'];
并且您只能在事件中使用,如下所示
onChange="selectCount(this.form);"
而不是
onfocus="selectCount(this.form);"
onClick="selectCount(this.form);"
功能齐全:
function selectCount(f) {
var selObj = f.elements['element_17_1'];
var totalChecked = 0;
for (i = 0; i < selObj.options.length; i++) {
if (selObj.options[i].selected) {
totalChecked++;
}
}
f.element_9.value = totalChecked;
}
更新:
为了您的php script
,您可以将选择的名称保留name="element_17_1[]"
,因此在函数中它应该是var selObj = f.elements['element_17_1[]'];
的,但没有像[ ]
这样的空格
演示。