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

という名前の要素を取得しようとしてelement_17_1[]いますが、選択ボックスの名前はelement_17_1[ ]です。JavaScriptは名前を文字の集まりと見なすだけであり、そのスペースが違いを生みます。

于 2012-06-19T02:56:39.887 に答える
0

選択した名前name="element_17_1"とIDを変更します。また、関数に含まれてid="element_17_1"いないため、次のようにイベントでのみ使用できます。myFormvar 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 に答える