지금 저는 laravel 프로젝트를하고 있습니다. 동적 추가 및 입력 dropdown 필드 제거를 구현하면 자바스크립트를 사용합니다. 추가 및 제거 기능이 제대로 작동 할 수 있습니다. 그러나 문제는 dropdown 필드에 있습니다. dropdown 안에 "기타"옵션을 추가하므로 "기타"를 선택하면 입력 유형 텍스트가 표시됩니다.
입력 유형 텍스트를 첫 번째 줄만 표시 할 수 있습니다. 그러나 다른 줄에서는 정확하지 않습니다. 여기 내 코드입니다
<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가 있습니다
<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>
여기에 테스트 추가 및 테스트를 위해 만든 링크가 있습니다. 내가 만든 기능 제거 "실행"button을 클릭하여 코드를 테스트합니다.
나는 것을 원하는. 모든 줄에 "기타"를 선택하지 않으면 입력 유형 텍스트를 표시합니다. 그러나 각 줄에서. 그리고 '새 항목 추가'를 추가하면 입력 유형 텍스트를 표시하지 않고 기본 선택 만 표시합니다.
도와주세요
#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;"에 firstinput class를 추가해야합니다. name = "other []"> 도
.inputother class를 통해 디스플레이를 추가하고 제거하면보기에 배치 된 모든 요소에 대해 수행됩니다. inputothercontent $ {count} class를 추가해야 개수별로 특정 요소를 찾고 적절한 div 디스플레이를 숨길 수 있습니다.
기본적으로 html에서 firstinput class를 추가하고 다른 요소를 추가 할 때 제거합니다.
dom에 요소를 추가 한 후 .sellitem 클릭을 수신하려면 리스너를 다시 깨워 야합니다. 동적으로 추가 된 요소에 대해서는 자동으로 새로 고침되지 않습니다.
현재 개수를 sellItem 요소의 속성에 저장해야 클릭시 어떤 요소가 변경되었는지 알 수 있고 이에 따라 표시를 변경할 수 있습니다.