函数使用javascript添加和删除输入下拉字段无法正常工作

现在我正在做laravel项目。我使用javascript实现了动态添加和删除输入下拉字段。添加和删除功能可以正常工作。但问题出在下拉字段中。在下拉列表中，我添加选项"；"其他"；，所以当它选择"；"其他"；，将显示输入类型文本。

我只能在第一行显示输入类型的文本。但在另一行是不正确的。这是我的代码

<div id="AddItemOption">
<div class="d-flex justify-content-center align-items-center">
<table class="table table-striped table-condensed table-additems">
<thead>
<tr>
<th class="align-middle border-0">items</th>
<th class="align-middle border-0">Delete</th>
</tr>
</thead>
<tbody>
<tr id="row1">
<td>
<select  name="items[]" class="form-control sellitem">
<option value="book">book</option>
<option value="pencil">pencil</option>
<option value="pen">pen</option>
<option value="other">other</option>
</select>
<input type="text" class='form-control inputother' style="display: none;" name="other[]"  >
</td>
<td class="action">
<button type="submit" class="btn btn-danger ">
Delete
</button>
</td>
</tr>
<tr>
<td colspan="4">
<button type="button" class="btn btn-default btn-xs">+ Add New Item</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>

这是脚本

<script>
var i=1;
$('#AddItemOption .btn-default').on('click', function(e) {
i++;
var el = $('.table-additems tbody tr:eq(0)').clone();
$(el).find('option:selected').removeAttr('selected');
$(el).find(':input').each(function(){
$(this).removeAttr('value');
});
$(this).closest('tr').before('<tr id="row'+i+'" >'+$(el).html()+'</tr>');
});
$(document).on('click', '#AddItemOption .btn-danger', function(e) {
if ($('.table-additems tbody tr').length == 2) {
var el = $('.table-additems tbody tr:eq(0)');
$(el).find('select:eq(0)').val($(el).find('select:eq(0) option:first').val());
$(el).find('select:eq(1)').val($(el).find('select:eq(1) option:first').val());
$(el).find('input:eq(0)').val('');
e.preventDefault();
}
else {
$(this).closest('tr').remove();
}
});
$('.sellitem').change(function(){
if ($(this).val() == 'other') {
$('.inputother').css({'display':'block'});
}else{
$('.inputother').css({'display':'none'});
}
}); 
</script>

这是我为测试添加和删除功能而制作的链接，我只需点击"即可；运行"；按钮测试代码

我想要。当选择"显示"时显示输入类型文本；其他"；不在所有行中。但是在每一行中。当我们添加"添加新项目"时，我只显示默认选择，而不显示输入类型文本。。

请帮助

在#AddItemOption的click事件下，您可以隐藏默认情况下克隆的输入，当选择框更改时，您可以使用$(this).closest("tr").find('.inputother')仅显示或隐藏选择框下方的输入。

演示代码：

var i = 1;
$('#AddItemOption .btn-default').on('click', function(e) {
i++;
var el = $('.table-additems tbody tr:eq(0)').clone();
$(el).find('option:selected').removeAttr('selected');
$(el).find(':input').each(function() {
$(this).removeAttr('value');
});
//while cloning hide other input
$(el).find('.inputother').css({
'display': 'none'
});
$(this).closest('tr').before('<tr id="row' + i + '" >' + $(el).html() + '</tr>');
});
$(document).on('click', '#AddItemOption .btn-danger', function(e) {
if ($('.table-additems tbody tr').length == 2) {
var el = $('.table-additems tbody tr:eq(0)');
$(el).find('select:eq(0)').val($(el).find('select:eq(0) option:first').val());
$(el).find('select:eq(1)').val($(el).find('select:eq(1) option:first').val());
$(el).find('input:eq(0)').val('');
e.preventDefault();
} else {
$(this).closest('tr').remove();
}
});
//use this because other slect-box are dynmically created
$(document).on('change', '.sellitem', function(e) {
if ($(this).val() == 'other') {
//find this ->closest trs-> get input box show
$(this).closest("tr").find('.inputother').css({
'display': 'block'
});
} else {
$(this).closest("tr").find('.inputother').css({
'display': 'none'
});
}
});

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="ajaxModalBody">
<div class="container-fluid">
<div id="AddItemOption">
<div class="d-flex justify-content-center align-items-center">
<table class="table table-striped table-condensed table-additems">
<thead>
<tr>
<th class="align-middle border-0">items</th>
<th class="align-middle border-0">Delete</th>
</tr>
</thead>
<tbody>
<tr id="row1">
<td>
<select name="items[]" class="form-control sellitem">
<option value="book">book</option>
<option value="pencil">pencil</option>
<option value="pen">pen</option>
<option value="other">other</option>
</select>
<input type="text" class='form-control inputother' style="display: none;" name="other[]">
</td>
<td class="action">
<button type="submit" class="btn btn-danger ">
Delete
</button>
</td>
</tr>
<tr>
<td colspan="4">
<button type="button" class="btn btn-default btn-xs">+ Add New Item</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

var i=1;
$('#AddItemOption .btn-default').on('click', function(e) {
i++;
var el = $('.table-additems tbody tr:eq(0)').clone();
$(el).find('.inputother').attr('count', i);
$(el).find('.inputother').addClass('inputothercount' + i);
$(el).find('.inputother').removeClass('firstinput');
$(el).find('.sellitem').attr('count', i);
//  $(el).find('.sellitem').class('count' + i);
$(el).find('option:selected').removeAttr('selected');
$(el).find(':input').each(function(){
$(this).removeAttr('value');
});
$(this).closest('tr').before('<tr id="row'+i+'" >'+$(el).html()+'</tr>');
listen();
});
$(document).on('click', '#AddItemOption .btn-danger', function(e) {
if ($('.table-additems tbody tr').length == 2) {
var el = $('.table-additems tbody tr:eq(0)');
$(el).find('select:eq(0)').val($(el).find('select:eq(0) option:first').val());
$(el).find('select:eq(1)').val($(el).find('select:eq(1) option:first').val());
$(el).find('input:eq(0)').val('');
e.preventDefault();
}
else {
$(this).closest('tr').remove();
}
});

function listen() {
$('.sellitem').change(function(){
var count = $(this).attr('count') || 1;
if (count == 1) {
if ($(this).val() == 'other') {
$('.firstinput').css({'display':'block'});
}else{  
$('.firstinput').css({'display':'none'});
};
return;
} else {
if ($(this).val() == 'other') {
$('.inputothercount' + count).css({'display':'block'});
}else{
$('.inputothercount' + count).css({'display':'none'});
}
}
});
}
listen();

你可以在这里玩https://repl.it/repls/DefiniteMintyScandisk#index.html并且您需要在<input type="text" class='form-control inputother' style="display: none;" name="other[]" >中添加firstinput类以及

当您通过类.inputother添加和删除显示时，您正在对视图中的所有元素执行此操作。您应该将类inputothercontent${count}添加到其中，这样您就可以通过计数找到特定的元素，并隐藏显示适当的div
在html中默认添加firstinput类，并在附加其他元素时将其删除。
在向dom添加元素后，您需要再次唤醒侦听器来侦听.sellitem单击。它不会自动刷新动态添加的元素。
您应该将当前计数保存在sellItem元素的属性中，这样点击就可以知道哪个元素被更改了，并在此基础上更改显示。

相关内容

最新更新

热门标签：