Question

我正在尝试动态添加表项。现在我有问题，当我从下拉列表中选择新动态创建的选择项时，其相应的下拉列表没有得到它的值。我得到“未捕获的TypeError：无法读取属性'选项'为null“。我认为问题在于参数传递给函数，如果select是更改但是找不到任何解决方法，则调用该函数。我正在添加代码片段

 <table class="tg" style="undefined;table-layout: fixed; width: 657px"  id="customFields" >
<colgroup>
<col style="width: 222px">
<col style="width: 216px">
<col style="width: 219px">
<col style="width: 219px">
<col style="width: 219px">
<col style="width: 219px">
<col style="width: 219px">
<col style="width: 219px">
</colgroup>
  <tr>
    <th class="tg-hgcj" rowspan="2"><br>Honours</th>
    <th class="tg-hgcj" colspan="2">General</th>
    <th class="tg-hgcj" colspan="2">Bank Transaction Details</th>
    <th class="tg-hgcj"rowspan="2" >See MP</th>
  </tr>
  <tr>
    <td class="tg-093g">Sub1</td>
    <td class="tg-093g">Sub2</td>
    <td class="tg-093g">Bank Transaction id</td>
    <td class="tg-093g">Bank Transaction date</td>
  </tr>
  <tr>
    <td class="tg-30rh"><select name="hons[]" id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'));disable_select();">
<option value=""></option>
<option value="Physics">Physics</option>
<option value="Chemistry">Cemistry</option>
<option value="Math">Math</option>
</select>

<select id="ddl2" name="session[]">
</select>
</td>
    <td class="tg-30rh"><input type="text" name="sub1[]"placeholder="Subject1"class="text-uppercase"></td>
    <td class="tg-30rh"><input type="text" name="sub2[]"placeholder="Subject2"class="text-uppercase"></td>
    <td class ="tg-30rh"><input type="text" name="tran_id[]"></td>
    <td class ="tg-30rh"><input type="text" name="tran_date[]"></td>
    <td><a href="javascript:void(0);" class="addCF">Add</a></td>
  </tr>
</table>

脚本

$(document).ready(function(){var x=0;var y ='ddl';var z='ddl2';
    $(".addCF").click(function(){
        $("#customFields").append('<tr><td class="tg-30rh"><select name="hons[]" id='+y+x+' onchange="configureDropDownLists(this,document.getElementById('+z+x+'));disable_select();"><option value=""></option><option value="Physics">Physics</option><option value="Chemistry">Cemistry</option><option value="Math">Math</option></select><select id='+z+x+' name="session"></select>\
</td>\
    <td class="tg-30rh"><input type="text" name="sub1[]"placeholder="Subject1"class="text-uppercase"></td>\
    <td class="tg-30rh"><input type="text" name="sub2[]"placeholder="Subject2"class="text-uppercase"></td>\
    <td class ="tg-30rh"><input type="text" name="tran_id[]"></td>\
    <td class ="tg-30rh"><input type="text" name="tran_date[]"></td>\
    <td><a href="javascript:void(0);" class="remCF">Remove</a></td></tr>');x++;
    });
    $("#customFields").on('click','.remCF',function(){
        $(this).parent().parent().remove();
    });
});


function configureDropDownLists(ddl1,ddl2) {
    var physics = new Array('Morning','Day','Night');
    var chemistry = new Array('Day', 'Evening');
    var math = new Array('Morning', 'Day');

    switch (ddl1.value) {
        case 'Physics':
            ddl2.options.length = 0;
            for (i = 0; i < physics.length; i++) {
                createOption(ddl2, physics[i], physics[i]);
            }
            break;
        case 'Chemistry':
            ddl2.options.length = 0; 
        for (i = 0; i < chemistry.length; i++) {
            createOption(ddl2, chemistry[i], physics[i]);
            }
            break;
        case 'Math':
            ddl2.options.length = 0;
            for (i = 0; i < math.length; i++) {
                createOption(ddl2, math[i], math[i]);
            }
            break;
            default:
                ddl2.options.length = 0;
            break;
    }

}

    function createOption(ddl, text, value) {
        var opt = document.createElement('option');
        opt.value = value;
        opt.text = text;
        ddl.options.add(opt);
    }

如何在表格中添加多行并相应地填充选择列表。

例如：如果我先选择物理，那么第二个列表选项应该是早上，白天，晚上对于动态创建的行，这并不乐观;

Answer 1

问题在于动态添加HTML的这一部分：

onchange="configureDropDownLists(this,document.getElementById('+z+x+'));disable_select();"

您需要在计算字符串表达式z+x周围的生成的HTML中加引号。现在它正在生成如下所示的HTML：

onchange="configureDropDownLists(this,document.getElementById(ddl20));disable_select();"

浏览器认为您要读取变量ddl20的值，该值不存在。校正：

onchange="configureDropDownLists(this,document.getElementById(\''+z+x+'\'));disable_select();"

添加多列后，不会填充动态下拉列表选项

1 个答案: