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

时间:2015-09-19 07:02:02

标签: javascript jquery html

我正在尝试创建一个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>");
});

1 个答案:

答案 0 :(得分:2)

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

<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