0

我最近尝试制作一个带有多个选择框的表单。当有人选择选项时，所选选项的数量将显示在另一个文本上。我是 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;
}
4

3 回答 3

1

You're trying to get an element named element_17_1[], but your select box is named element_17_1[ ]. JavaScript just sees the name as a bunch of characters, and that space makes a difference.

于 2012-06-19T02:56:39.887 回答
0

更改您选择的名称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[]'];但没有空格[ ]

演示。

于 2012-06-19T03:11:15.583 回答
0

在您的 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;
}

现在您不必关心 select 元素的名称。:-)

编辑

要单击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;
}

现在的功课已经够多了。;-)

于 2012-06-19T03:11:47.083 回答