- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在一个表单中,我有 2 个输入。在第一个输入中,我使用 datalist
我通过 JSON
加载它当第一个输入更改时,第二个输入会自动完成。到这里一切正常!
然后我添加了一个添加按钮,在其中添加相同的行。问题是因为我使用 id
选择输入,当我添加新行时,我有相同的 id.. 所以自动完成不起作用..
我该如何解决这个问题?这里是jssFiddle .
counter = 0;
var dataList = document.getElementById('products');
var jsonOptions = [{
"product": "11111",
"description": "description 1"
}, {
"product": "22222",
"description": "description 2"
}, {
"product": "33333",
"description": "description 3"
}];
jsonOptions.forEach(function(item) {
var option = document.createElement('option');
option.value = item.product;
option.text = item.description;
dataList.appendChild(option);
$(function() {
$('#product').on('change keyup', function() {
var i = this.value;
var description = "";
var productsInBox = 0;
jsonOptions.forEach(function(a) {
if (a.product == i) {
description = a.description;
productsInBox = a.productsInBox;
}
});
$('#description').val(description);
});
});
});
$('#form1')
// Add button click handler
.on('click', '.addButtonDED', function() {
counter++;
var $template = $('#addLineInDed'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('data-index', counter)
.insertBefore($template);
// Update the name attributes
$clone
.find('[name="product"]').attr('name', 'product-' + counter).end()
.find('[name="description"]').attr('name', 'description-' + counter).end()
})
// Remove button click handler
.on('click', '.removeButtonDED', function() {
var $row = $(this).parents('.form-group'),
index = $row.attr('data-index');
counter--;
// Remove element containing the fields
$row.remove();
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<div class="col-xs-2">
<input type="text" id="product" list="products" class="form-control" name="product-0" />
<datalist id="products"></datalist>
</div>
<div class="col-xs-4">
<input id="description" type="text" class="form-control" name="description-0" />
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default addButtonDED"><i class="fa fa-plus"></i></button>
</div>
</div>
<div id="addLineInDed" class="form-group hide">
<div class="form-group">
<div class="col-xs-2">
<input type="text" id="product" list="products" class="form-control" name="product-0" />
<datalist id="products"></datalist>
</div>
<div class="col-xs-4">
<input id="description" type="text" class="form-control" name="description-0" />
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default removeButtonDED"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
<div class="col-md-10 ">
<button type="submit" name="formAction" value="next" class="btn btn-primary">Submit</button>
</div>
</fieldset>
</form>
最佳答案
使用类,将您的选择重命名为数组值:
counter = 0;
var dataList = $('.products');
var jsonOptions = [{
"product": "11111",
"description": "description 1"
}, {
"product": "22222",
"description": "description 2"
}, {
"product": "33333",
"description": "description 3"
}];
jsonOptions.forEach(function(item) {
var option = '<option value="' + item.product + '">' + item.description + '</option>';
dataList.append(option);
});
$(function() {
$('body').on('input', '.product,.products', function() {
var i = this.value;
var description = "";
var productsInBox = 0;
jsonOptions.forEach(function(a) {
if (a.product == i) {
description = a.description;
productsInBox = a.productsInBox;
}
});
$(this).closest('.form-group').find('.description').val(description);
});
});
$('#form1').on('click', '.addButtonDED', function() {
var $template = $('.form-group:last').clone(true, true).find('input').val('').end()
.find('.addButtonDED').removeClass('addButtonDED').addClass('removeButtonDED').end()
.find('i').removeClass('fa-plus').addClass('fa-minus').end();
$template.insertAfter('.form-group:last');
})
// Remove button click handler
.on('click', '.removeButtonDED', function() {
var $row = $(this).closest('.form-group');
$row.remove();
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<div class="col-md-2">
<input type="text" list="products" class="form-control product" name="product[]" />
<datalist id="products" class="products"></datalist>
</div>
<div class="col-md-4">
<input id="" type="text" class="form-control description" name=" description[]" />
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default addButtonDED"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="col-md-10 ">
<button type="submit" name="formAction" value="next" class="btn btn-primary">sUBMIT</button>
</div>
</fieldset>
</form>
</fieldset>
</form>
要读取值,请执行循环:
foreach($_POST['product'] as $product) {
//do stuf
}
关于javascript - 在自动完成功能中断的表单中添加行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42339113/
#include int main() { int i; for( i = 0; i< 10 ; i++ ) { printf("test1 &d", i);
我有一个连接到远程服务器以查询数据的 C# 程序。数据很大,所以查询大约需要 2 分钟才能完成。在这 2 分钟的时间内,互联网中断了。这导致作业无法完成,程序卡在获取数据例程中。 它建立了连接,但在选
语句 1: [2,4,6,7,8].each do |i| (i % 2 == 0) || (puts "Not even" && break) puts i end 声明 2: [2
我想知道 C++ 是否有任何处理中断的方法。我希望一个程序将信息存储在文本文件中,而另一个程序根据文本文件中的内容打印一条语句。由于我希望它尽可能准确,因此我需要在更新程序更新文件时中断打印程序。 最
我正在尝试终止一个线程,但它不会中断或停止。所有这些都是名为 Webots 的软件 Controller 的一部分。我用它来模拟多机器人系统。在每个机器人的 Controller 中,我启动了一个线程
中断10h可以使用的服务有很多, 我想问一下关于其中两个我很困惑的问题 首先是, AH = 06H SCROLL UP WINDOW AH = 07H SCROLL DOWN WINDOW 在 D
我有一个基本的 SQL 问题,如果有两个事件连接,"A"和 "B"到 SQL 服务器,假设两者之间发生死锁,那么为了避免死锁,SQL 服务器将回滚其中一个连接“A”或“B”的交易。假设 SQL Ser
我有一个 mapkit/ View ,它工作正常 - 但我滚动并在 2 - 10 次移动后我的应用程序崩溃了......而且这只是一个“中断”。 这是我的代码的一部分。我认为这是后台线程和数组释放/覆
有什么办法可以做到,比如 C/C# ? 例如(C#风格) for (int i = 0; i Seq.tryFind (fun i -> printfn "%d" i i=66) 在实践中,
我的问题是Haskell如何与系统交互。 例如,IO如何发生? 我对IO monad不感兴趣。或者如何使Haskell打印字符串或读取文件。 我对Haskell和底层操作系统之间的层(如果是这样的话)
你能确认下一个break是否取消了内部for循环吗? for (out in 1:n_old){ id_velho <- old_table_df$id[out] for
我有一个程序可以进行一些数据分析,并且有几百行长。 在程序的早期,我想做一些质量控制,如果没有足够的数据,我希望程序终止并返回到 R 控制台。否则,我希望执行其余代码。 我尝试过break、brows
我有一个 if 语句,用于检查我的对象(向导)是否命中了项目。如果他这样做了,巫师的大小将会改变,他应该能够在与障碍物的 1 次碰撞中幸存。 现在我陷入了“在 1 个障碍物碰撞中幸存”,因为在我的碰撞
我正在尝试使用迭代器来显示很多内容。我不断收到“break;”错误线。它说这是一个无法访问的声明。如有任何帮助,我们将不胜感激。 public Lot getLot(int number) {
我正在创建一个应用程序,我需要在其中处理可能非常庞大且可能需要一些时间的数据。 现在我阅读了很多关于 IntentService 的资料,实际上我已经将它实现为处理 REST 调用的通信类,但现在我试
我有一个自定义的 UITableViewCell。该单元具有三个标签。最左边的“金额”标签具有以下约束。 在单元格的右侧,我有另一个标签,“Label Dollar Amount”。它具有以下约束:
我有以下不和谐嵌入: message.reply({ content: '', embed: { color: 11416728, author
JavaScript 不是我最擅长的技能,但我会尽力解释,所以就这样吧。我有人在我的网站上创建了一个幻灯片菜单,我也使用 jplayer 音乐播放器。 现在一切正常,直到我在顶部添加此脚本。由于某种原
我已经在 Ubuntu 上安装了 android studio,有一个带有损坏图像的 API,我也尝试过重新安装。我应该怎么做才能克服这个问题。 删除它后,它没有在 sdk 管理器中显示 提前致谢。
假设我的站点上有大约 10 个 css 文件。我想把它们合二为一。但是当我组合它们时(只是“连接”文件,以便将它们包含到 html 中),我的样式/布局中断了。这不是路径问题或其他问题,只是选择器无法
我是一名优秀的程序员,十分优秀!