javascript - 使用输入选择更改时创建 Html 行(行数取决于所选的选择值)

Question

我正在尝试在选择更改上创建一个html表行我的想法是基于选择更改创建行，选择的选择选项数量是我想要在特定html表中创建的许多数字或行输入文本框，但这适用于按钮单击我不知道如何在选择更改上创建

HTML:

<select id="Number_of_position"  onchange="getval(this);"></select> 
<table id="Positions_names"></table>

JS:

$(document).ready(function(){

    var select = document.getElementById("Number_of_position"); 
    for (var i = 100; i >= 1; i--) {
        var option = document.createElement('option');
        option.text = option.value = i; 
        select.add(option, 0);
    }

});

function getval(sel) {
    alert(sel.value);
}

$("#addRow").click(function () {
    $("#Positions_names").append("<tr><td><input type='text'></td></tr>");
});

Answer 1

确保删除 onchange属性并切换到 unobtrusive绑定(bind)事件处理程序的方式

<select id="Number_of_position" onchange="getval(this);" ></select>

您正在寻找 jQuery 的 change(handler) 事件处理程序。

这将更新 table每次更改时都会有新鲜内容 select值:

var select = $("#Number_of_position"), table = $("#Positions_names");

select.change(function () {
    var rows = '';
    for (var i = 0; i < $(this).val(); i++) {
        rows += "<tr><td><input type='text'></td></tr>";
    }
    table.html(rows);
});

JSFiddle demo