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

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

以下是我的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);
}

var num_rows=1；
var num_测试=1；
var myArray=新数组（）；
函数优先选择（id）{
var index=id.replace（/\D+/g'，）；
var item=$（“#选择“+索引+”）.val（）；
var object=item.replace（/\d/g，“”）；
var表=$（“#测试”）；
如果（对象=='analize'）{
表.find（'tr'）。每个函数（i）{
$（“#selectTest”+i+”）.empty（）；
$（“#selectTest”+i+”）.append（“analizetest1 analizetest2 analizetest3”）；
});
}
else if（对象=='create'）{
表.find（'tr'）。每个函数（i）{
$（“#selectTest”+i+”）.empty（）；
$（“#selectTest”+i+”）.append（“CreateTest1CreateTest2”）；
});
}
else if（object=='draft'）{
表.find（'tr'）。每个函数（i）{
$（“#selectTest”+i+”）.empty（）；
$（“#selectTest”+i+”）。追加（“DraftTest1DraftTest2DraftTest3”）；
});
}
否则{
表.find（'tr'）。每个函数（i）{
$（“#selectTest”+i+”）.empty（）；
});
}
}
$（文档）.ready（函数（）{
$（“#addObjekt”）。单击（函数（）{
num_rows=$（“#objectTable tr”）.length；
$（“#objectTable”）.append（“AnalizeCreateDraftSelectCopy”）；
});
$（“#删除对象”）。单击（函数（）{
var行=$（“#objectTable tr”）.length-1；
如果（行>1）{
$（“#objectRow”+行+”）.remove（）；
返回false；
}
否则{
//无所事事
}
});
$（“#添加测试”）。单击（函数（）{
num#u tests=$（“#test tr”）。长度；
$（“#测试”）。追加（“参数”）；
});
$（“#删除测试”）。单击（函数（）{
var测试行=$（“#测试tr”）。长度-1；
如果（测试行>1）{
$（“#测试行”+测试行+”）.remove（）；
返回false；
}
否则{
//无所事事
}
});
});
函数showMatrix（）{
num_rows=$（“#objectTable tr”）.length-1；
num#u tests=$（“#test tr”）。长度；
对于（变量x=0；x

问题是：

第二个下拉列表尚未根据第一个下拉列表的选择填充。由于某些原因，它在小提琴中不能正常工作，在我使用的环境中运行良好

如何更改代码，以便看到第二个下拉列表也填充了以后添加的新行，而不仅仅是已经存在的行

最后，我希望右侧的行仅“附加”到左侧链接到的单个对象。这意味着在左侧选择对象时，只应显示其各自的测试。我不是一个精通Javascript的人，我最初的想法是创建一个二维数组，但后来被卡住了

---

我知道这可能有点过分，但我会非常感谢任何建议。谢谢

确保功能

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>

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);
}

数字
对象
+-
分析
创造
草稿
选择
复制
子编号
试验+-
参数

JS:

<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>

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);
}

var num_rows=1；
var num_测试=1；
var myArray=新数组（）；
var globalIndex=0；
变量globalObject=''；
$（文档）.ready（函数（）{
$（'#selectButton1'）。单击（函数（）{
firstSelection（this.id）；
});
函数优先选择（id）{
var index=id.replace（/\D+/g'，）；
var item=$（“#选择“+索引+”）.val（）；
var object=item.replace（/\d/g，“”）；
globalIndex=指数；
全局对象=对象；
var vars={index:index，item:item}；
//var表=$（“#测试”）；
document.getElementById（“zaehler1”）.value=index+'-1'；
如果（对象=='analize'）{
$（“#选择测试1”）.empty（）；
$（“#selectTest1”）.append（“analizetest1 analizetest2 analizetest3”）；
}
else if（对象=='create'）{
$（“#选择测试1”）.empty（）；
$（“#selectTest1”）.append（“CreateTest1CreateTest2”）；
}
else if（object=='draft'）{
$（“#选择测试1”）.empty（）；
$（“#selectTest1”）.append（“DraftTest1DraftTest2DraftTest3”）；
}
否则{
$（“#选择测试1”）.empty（）；
}
返回变量；
}
$（“#addObjekt”）。单击（函数（）{
num_rows=$（“#objectTable tr”）.length；
$（“#objectTable”）.append（“AnalizeCreateDraftSelectCopy”）；
});
$（“#删除对象”）。单击（函数（）{
var行=$（“#objectTable tr”）.length-1；
如果（行>1）{