Javascript 将对话框弹出窗口中的值动态添加到父页面

好吧，我知道我需要做什么…我就是不知道怎么写。基本上，我有一个带有类别表（比如颜色、数字、字母）的父页面。这些类别是表格的父类。儿子是红色、蓝色、56、72、abc、def等等。我有一个nyroModal对话框弹出，带有下拉菜单，可向该表添加新行。我成功地添加了新行，并在单击“保存”按钮时将正确的下拉值添加到父表中，但没有添加到正确的“父表”下。他们只是在表的末尾加上。弹出窗口中的一个下拉列表包含父类别的选项（选择name=“chooseFather”），这是我唯一不知道如何传递的值

<select name="chooseFather">
<option value="Colors" id="father3">Colors</option>
<option value="Numbers" id="father4">Numbers</option>
<option value="Letters" id="father5">Letters</option>
</select>

---

如果将html模块化一点，如下所示：

<div class="widget_group">    
    <h3>Colors</h3>
    <table id="Colors"></table>
</div>

<div class="widget_group">    
    <h3>Numbers</h3>
    <table id="Numbers"></table>
</div>

颜色
数字

然后可以使用第一个select的值以所需的表ID为目标

另请注意，将ID添加到要访问的重要元素可以简化代码

<select  value="3" id="chooseFather">

使用jQuery添加行：

$("img.save").click(function () {
    if( !validateSelections()){
        alert('select one of each');
        return;
    }

    /* note that ID attribute was added to each "select"*/
   var tableID= $('#chooseFather').val();
    var newRow='<tr><td>'+$('#select1').val()+'</td><td>'+$('#select2').val()+'</td></tr>';

    $('#'+ tableID).append( newRow)

});


function validateSelections(){
    return $('#chooseFather').val() && $('#select1').val() && $('#select2').val();
}

$（“img.save”）。单击（函数（）{
如果（！validateSelections（））{
警报（“选择其中一个”）；
返回；
}
/*请注意，ID属性已添加到每个“选择”*/
var tableID=$（'#chooseFather'）.val（）；
var newRow='+$（'#select1'）.val（）+'+$（'#select2'）.val（）+''；
$（'#'+tableID）.append（newRow）
});
函数validateSelections（）{
返回$（'chooseFather'）.val（）&&$（'select1'）.val（）&&$（'select2'）.val（）；
}

演示：

---

此外，不推荐使用字体标记，请改用添加到元素和css的类

不确定表结构的确切外观，但如果直接在行后插入，可能需要使用

insertafter（）

或

after（）

方法。如果插入子表

append（）

到正确的表中。如果不在jsfiddle.net上查看html和演示就很难提供帮助，这将非常有帮助。可以在没有modal的情况下创建简单的演示我如何在JSFIDLE上创建一个对话框？您不能跳过简单演示的对话框吗？否则可以使用

其他资源来添加脚本和cssEek。这有用吗？自从我剥离了对话框（可能忽略了一些简单的东西，咖啡今天早上不起作用）之后，它就不起作用了，但是你可以看到语法标记。为每个组使用不同的表，并将其包装在带有标题的DIV中，会简单得多。可以使每个表的ID与第一个selectWell的值匹配，这似乎有道理，但在JSFIDLE上不起作用。将其插入我的页面也不起作用。不幸的是，我正在Internet Explorer中测试该网站，但我在IE、Chrome和Mozilla中测试了JSFIDLE，它甚至无法进入警报。好的，我没有注意到您在选择值中有“未定义”的内容。必须修改验证函数。。。你没有试着加一行吗？我试着加一行，运气不好。您是否更新了JSFIDLE？这对我还是不起作用。
$("img.save").click(function () {
    if( !validateSelections()){
        alert('select one of each');
        return;
    }

    /* note that ID attribute was added to each "select"*/
   var tableID= $('#chooseFather').val();
    var newRow='<tr><td>'+$('#select1').val()+'</td><td>'+$('#select2').val()+'</td></tr>';

    $('#'+ tableID).append( newRow)

});


function validateSelections(){
    return $('#chooseFather').val() && $('#select1').val() && $('#select2').val();
}