Question

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

Answer 1

您正在尝试获取名为element_17_1[]的元素，但您的选择框名为element_17_1[ ]。 JavaScript只是将名称视为一堆字符，而这个空间会产生影响。

Answer 2

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

这样的空格

DEMO.

Answer 3

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

现在有足够的功课。 ; - ）

列表框选择计数不工作不工作

3 个答案:

修改