0

私はJavaScriptに非常に慣れていません。別のリストボックス（製品と呼ばれる）の選択された値を使用して、1つのリストボックス（アグリゲーターと呼ばれる）内のオプションを制御しようとしています。以下は、これまでに書いたコードです。

HTML ページを読み込むと、テキスト ボックスを制御するために記述したコード (txt、txt2、txt3 を使用) が機能しなくなりました。

Javascript

function pGo() {

            var x = document.getElementById("Product").value;
            var txt = "";
            var txt2 = "";
            var txt3 = "";
            var list = document.getElementById("Aggregator");
            var aggrs = new Array();
            aggrs[0] = "h";
            aggrs[1] = "e";
            aggrs[2] = "l";
            aggrs[3] = "l";
            aggrs[4] = "l";
            aggrs[5] = "o";
            aggrs[6] = "o";
            var length = aggrs.length;
            var element = null;

            if (x == "HII") {
                txt = "Full ";
                txt2 = "/";
                txt3 = "/";
                for (var i = 0; i < 5; i++)){
                element = aggrs[i]
                var opt = document.createElement("option");
                opt.innerText = element;
                opt.setAttribute(element, 'newvalue');
                list.appendChild(opt);
                }
            }
            else if (x == "DLG"){
                txt = "Full";
                txt2 = "/T";
                txt3 = "/responses/";
                for (var i = 0; i < 1; i++)){
                element = aggrs[i]
                var opt = document.createElement("option");
                opt.innerText = element;
                opt.setAttribute(element, 'newvalue');
                list.appendChild(opt);
                }
            }
            else if (x == "TBB"){
                txt = "Full ";
                txt2 = "/Trams";
                txt3 = "/respo";
                for (var i = 0; i < 1; i++)){
                element = aggrs[i]
                var opt = document.createElement("option");
                opt.innerText = element;
                opt.setAttribute(element, 'newvalue');
                list.appendChild(opt);
                }
                element = aggrs[6]
                var opt = document.createElement("option");
                opt.innerText = element;
                opt.setAttribute(element, 'newvalue');
                list.appendChild(opt);
            }               
            form.elements.calcType.value = txt;
            form.elements.transform.value = txt2;
            form.elements.calcResponse.value = txt3;
            }

HTML

product 
        <select id="Product" onchange = "pGo()">
            <option>HII</option>
            <option>DLG</option>
            <option>TBB</option>
        </select><div>
        <script type = "text/javascript">
aggregator      
        <select name = "Aggregator">
        </select><br/><br/>

他のテキスト ボックスが出力される

製品選択で選択された値に応じて、aggrs リストから特定の値を表示するには、Aggregator が必要です。

HII : [0,1,2,3,4,5]

DLG : [0,1]

TBB : [0,1,6]

4

2 に答える 2

1

基本的な JavaScript に問題がある場合は、jQuery を学習しないでください。jQuery を使用すると、さらに悪い問題が発生します。

まず、ID「Aggregator」を求めています。

var list = document.getElementById("Aggregator");

ID「Aggregator」のオブジェクトがない場合:

<select name = "Aggregator"></select>

于 2013-07-02T16:23:49.107 に答える
0

まず、コードに多くの構文エラーがあります。これらの変更を行った場所にコメントを追加しました。

id 要素「Aggregator」がなかったため、マークアップを変更しました。

product
<select id="Product" onchange="pGo();">
    <option>Pick one</option>
    <option>HII</option>
    <option>DLG</option>
    <option>TBB</option>
</select>
<div>aggregator
    <select id="Aggregator" name="Aggregator"></select>
    <br/>
    <br/>
</div>

多くの重複コード (まだいくつかあります) とその他の問題 (コメントを参照) がありました。

// function to remove duplicate code
function addOptions(list, aggrs, limit) {
    var i = 0;
    // fix issue where option list did not empty on new select
    for (; i < list.length; i++) {
        list.remove(i);
    }
    for (i = 0; i < limit; i++) { // fix extra ")"
        var opt = document.createElement("option");
        element = aggrs[i]; //missing semicolon
        opt.text = element;  // use standard form not innerHtml
        opt.value = element;  // you had no value
        opt.setAttribute(element, 'newvalue');
        list.appendChild(opt);
    }
}

function pGo() {
    var x = document.getElementById("Product").value;
    var txt = "";
    var txt2 = "";
    var txt3 = "";
    var list = document.getElementById("Aggregator");
    var aggrs = ["h", "e", "l", "l", "l", "o", "o"]; //simpler array
    var length = aggrs.length;
    var element = null;
    if (x == "HII") {
        txt = "Full ";
        txt2 = "/";
        txt3 = "/";
        addOptions(list, aggrs, 5);

    } else if (x == "DLG") {
        txt = "Full";
        txt2 = "/T";
        txt3 = "/responses/";
        addOptions(list, aggrs, 1);
    } else if (x == "TBB") {
        txt = "Full ";
        txt2 = "/Trams";
        txt3 = "/respo";
        addOptions(list, aggrs, 1);
        // strange additional option added
        var oneAggr = [];
        oneAggr[0] = aggrs[6];
        addOptions(list, oneAggr, 1);
    }
    //  form.elements.calcType.value = txt;  // commented out due to not existing
    //  form.elements.transform.value = txt2;
    //  form.elements.calcResponse.value = txt3;
}

これはまだあまりきれいではありません (設定したオプションは多少奇妙です) が、少なくとも動作するはずです。

使用するサンプル: http://jsfiddle.net/Qc4yD/

于 2013-07-02T17:23:55.697 に答える