Javascript显示动态下拉列表的问题

Question

专家！我有两个动态下拉菜单的问题。这是我的小提琴：

Demo

这是我的jQuery和Javascript：

var num_rows = 1;
var num_tests = 1;
var myArray = new Array();

function firstSelection(id) {
    var index = id.replace( /\D+/g, '');
    var item = $("#select" + index + "").val();
    var object = item.replace(/\d/g, "");

    var table = $("#test");

    if(object == 'analize') {
        table.find('tr').each(function(i) {
            $("#selectTest" + i + "").empty();
            $("#selectTest" + i + "").append("<option value=''/><option value='analizetest1'>AnalizeTest1</option><option value='analizetest2'>AnalizeTest2</option><option value='analizetest3'>AnalizeTest3</option>");
        });
    }
    else if(object == 'create') {
        table.find('tr').each(function(i) {
            $("#selectTest" + i + "").empty();
            $("#selectTest" + i + "").append("<option value=''/><option value='createtest1'>CreateTest1</option><option value='createtest2'>CreateTest2</option>");
        });
    }
    else if(object == 'draft') {
        table.find('tr').each(function(i) {
            $("#selectTest" + i + "").empty();
            $("#selectTest" + i + "").append("<option value=''/><option value='drafttest1'>DraftTest1</option><option value='drafttest2'>DraftTest2</option><option value='drafttest3'>DraftTest3</option>");
        });
    }
    else {
        table.find('tr').each(function(i) {
            $("#selectTest" + i + "").empty();
        });
    }
}

$(document).ready(function() {
    $("#addObjekt").click(function() {
        num_rows = $("#objectTable tr").length;

        $("#objectTable").append("<tr id='objectRow" + num_rows + "'><td><input class='text' type='text' id='pbz" + num_rows + "' name='pbz" + num_rows + "' value='" + num_rows + "' readonly/></td><td><select id='select" + num_rows + "'><option/><option value='analize" + num_rows + "'>Analize</option><option value='create" + num_rows + "'>Create</option><option value='draft" + num_rows + "'>Draft</option></select></td><td><button type='button' id='selectButton" + num_rows + "' onclick='firstSelection(id);'>Select</button></td><td><button type='button' id='copy" + num_rows + "'>Copy</button></td></tr>");  
    });

    $("#deleteObjekt").click(function() {
        var row = $("#objectTable tr").length - 1;

        if(row > 1) {
            $("#objectRow" + row + "").remove();
            return false;
        }
        else {
            // do nothing
        }
    });

    $("#addTest").click(function() {
        num_tests = $("#test tr").length;

        $("#test").append("<tr id='testRow" + num_tests + "'><td><input class='text' type='text' id='zaehler" + num_tests + "' name='zaehler" + num_tests + "' value='" + num_rows + "-" + num_tests + "' readonly/></td><td><select id='selectTest" + num_tests + "'></select></td><td><button type='button' id='parameter" + num_tests + "'>Parameter</button></td><td></td><td></td></tr>");
    });

    $("#deleteTest").click(function() {
        var test_row = $("#test tr").length - 1;

        if(test_row > 1) {
            $("#testRow" + test_row + "").remove();
            return false;
        }
        else {
            // do nothing
        }
    });
});

function showMatrix() {
    num_rows = $("#objectTable tr").length - 1;
    num_tests = $("#test tr").length;

    for(var x = 0; x < num_rows; x++) {
        myArray[x] = new Array();
        myArray[x] = $("#select" + (x + 1) + "").val();

        for(var z = 0; z < num_tests; z++) {
            myArray[x][z] = firstSelection.item + firstSelection.index;
        }

    }

    alert(myArray);
}

问题是：

1. 第二个下拉列表尚未根据第一个下拉列表的选择进行填充。由于某种原因，它在小提琴中不能正常工作，它在我使用的环境中运行良好。
2. 如何更改代码，以便我看到第二个下拉列表也填充了以后添加的新行，而不仅仅是现有的行？
3. 最后，我希望右侧的行是＆＃34;附加＆＃34;仅限于左侧链接的单个对象。这意味着选择左侧的对象应仅显示其各自的测试。我不熟悉Javascript，我开始创建一个二维数组，但卡住了。

我知道这可能有点太多了，但我会非常感谢任何建议。谢谢！

Answer 1

确保函数firstSelection在范围内。在

中移动该功能

$(document).ready(function()
{
    //...
});;

如果您的代码正确，它将起作用。

我建议这样做，因为我在运行代码时遇到以下错误：

Uncaught ReferenceError: firstSelection is not defined 

好试试这个。这是工作。在此之前编辑HTML和JS，如下所示：

<强> HTML：

<table id="panel" class="panel">
        <tr>
            <td>
                <table id="objectTable" class="objectTable">
                    <tr id="initial">
                        <td width="20px">Number</td>
                        <td>Object</td>
                        <td align="right"><button type="button" id="addObjekt" href="#">+</button><button type="button" id="deleteObjekt" href="#">-</button></td>
                        <td></td>
                    </tr>
                    <tr id="objectRow1">
                        <td><input class="text" type="text" id="pbz1" name="pbz1" value="1" readonly/></td>
                        <td><select id="select1">
                            <option/>
                            <option value="analize1">Analize</option>
                            <option value="create1">Create</option>
                            <option value="draft1">Draft</option>
                        </select></td>
                        <td><button type="button" id="selectButton1">Select</button></td>
                        <td><button type="button" id="copy1">Copy</button></td>
                    </tr>
                </table>
            </td>
            <td>
                <table id="test" class="test">
                    <tr>
                        <td>Subnumber</td>
                        <td>Test <button type="button" id="addTest" href="#">+</button><button type="button" id="deleteTest" href="#">-</button></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr id="testRow1">
                        <td><input class="text" type="text" id="zaehler1" name="zaehler1" value="1-1" readonly/></td>
                        <td><select id="selectTest1">
                        </select></td>
                        <td><button type="button" id="parameter1">Parameter</button></td>
                        <td></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

<强> JS：

var num_rows = 1;
var num_tests = 1;
var myArray = new Array();
var globalIndex = 0;
var globalObject = '';

$(document).ready(function() {     

    $('#selectButton1').click(function(){
       firstSelection(this.id);
    });

    function firstSelection(id) {
    var index = id.replace( /\D+/g, '');
    var item = $("#select" + index + "").val();
    var object = item.replace(/\d/g, "");
    globalIndex = index;
    globalObject = object;
    var vars = {index: index, item: item};

    //var table = $("#test");

    document.getElementById("zaehler1").value = index + '-1';

    if(object == 'analize') {
        $("#selectTest1").empty();
        $("#selectTest1").append("<option value=''/><option value='analizetest1'>AnalizeTest1</option><option value='analizetest2'>AnalizeTest2</option><option value='analizetest3'>AnalizeTest3</option>");
    }
    else if(object == 'create') {
        $("#selectTest1").empty();
        $("#selectTest1").append("<option value=''/><option value='createtest1'>CreateTest1</option><option value='createtest2'>CreateTest2</option>");
    }
    else if(object == 'draft') {
        $("#selectTest1").empty();
        $("#selectTest1").append("<option value=''/><option value='drafttest1'>DraftTest1</option><option value='drafttest2'>DraftTest2</option><option value='drafttest3'>DraftTest3</option>");
    }
    else {
        $("#selectTest1").empty();
    }

    return vars;
}

    $("#addObjekt").click(function() {
        num_rows = $("#objectTable tr").length;

        $("#objectTable").append("<tr id='objectRow" + num_rows + "'><td><input class='text' type='text' id='pbz" + num_rows + "' name='pbz" + num_rows + "' value='" + num_rows + "' readonly/></td><td><select id='select" + num_rows + "'><option/><option value='analize" + num_rows + "'>Analize</option><option value='create" + num_rows + "'>Create</option><option value='draft" + num_rows + "'>Draft</option></select></td><td><button type='button' id='selectButton" + num_rows + "' onclick='firstSelection(id);'>Select</button></td><td><button type='button' id='copy" + num_rows + "'>Copy</button></td></tr>");  
    });

    $("#deleteObjekt").click(function() {
        var row = $("#objectTable tr").length - 1;

        if(row > 1) {
            $("#objectRow" + row + "").remove();
            return false;
        }
        else {
            // do nothing
        }
    });

    $("#addTest").click(function() {
        num_tests = $("#test tr").length;

        $("#test").append("<tr id='testRow" + num_tests + "'><td><input class='text' type='text' id='zaehler" + num_tests + "' name='zaehler" + num_tests + "' value='" + globalIndex + "-" + num_tests + "' readonly/></td><td><select id='selectTest" + num_tests + "'></select></td><td><button type='button' id='parameter" + num_tests + "'>Parameter</button></td><td></td><td></td></tr>");

        $("#test").find('tr').each(function(i) {
            if(globalObject == 'analize') {
                $("#selectTest" + i + "").append("<option value=''/><option value='analizetest1'>AnalizeTest1</option><option value='analizetest2'>AnalizeTest2</option><option value='analizetest3'>AnalizeTest3</option>");
            }
            else if(globalObject == 'create') {
                $("#selectTest" + i + "").append("<option value=''/><option value='createtest1'>CreateTest1</option><option value='createtest2'>CreateTest2</option>");
            }
            else if(globalObject == 'draft') {
                $("#selectTest" + i + "").append("<option value=''/><option value='drafttest1'>DraftTest1</option><option value='drafttest2'>DraftTest2</option><option value='drafttest3'>DraftTest3</option>");
            }
            else {
               //nothing
            }
        });
    });

    $("#deleteTest").click(function() {
        var test_row = $("#test tr").length - 1;

        if(test_row > 1) {
            $("#testRow" + test_row + "").remove();
            return false;
        }
        else {
            // do nothing
        }
    });
});

function showMatrix() {
    num_rows = $("#objectTable tr").length - 1;
    num_tests = $("#test tr").length;

    for(var x = 0; x < num_rows; x++) {
        myArray[x] = new Array();
        myArray[x] = $("#select" + (x + 1) + "").val();

        for(var z = 0; z < num_tests; z++) {
            myArray[x][z] = firstSelection.item + firstSelection.index;
        }

    }

    alert(myArray);
}

Demo

Answer 2

方法showMatrix无法像这样访问方法firstSelection的局部变量。

要在函数showMatrix中显示函数firstSelection中的变量，您有三种选择：

• 使其成为全球性的，
• 将其设为对象属性，或
• 从firstSelection调用showMatrix时将其作为参数传递。

第三个选项可能是最好的选项，不建议使用全局变量，即使项目属性非常优化，它可能不是最适合您的情况。

只需确保firstSelection从中返回所需的变量，然后在showMatrix内访问它们。您还可以返回一个保存所需变量值的对象。

function firstSelection(id) {
    var index = id.replace( /\D+/g, '');
    var item = $("#select" + index + "").val();
    // ... some code
    var vars = {index: index, item: item};
    return vars;