这是我的看法,请看一下:
<div class="form-group target" id="tools" >
<div class="input-group">
<div class="col-lg-6"> <select class="form-control" style="width: 100%" name="tool_id[]" id="toolss" onchange="tool(this)" required>
<option value="">Select</option>
</select></div>
<div class="col-lg-3">
<input type="text" class="form-control" required name="quantity[]" id="quantity" placeholder="Quantity">
</div>
<div class="col-lg-3" id="avail">
<p class="available">0 available</p>
</div>
<span class="input-group-btn">
<button type="button" class="btn btn-danger addel-delete"><i class="fa fa-remove"></i>
</button>
</span>
</div>
</div>
这是我的脚本:
function tool(sel)
{
var tools=sel.value;
alert(tools);
var url='<?php echo base_url(); ?>admin/tool/ajax_available';
$.post(url, {tools:tools}, function(data){
alert("Value: " + $(".available").html(data));
});
}
问题是,无论何时我继续从选择框中选择值,相应的值和所有先前选择的值都将变为相同。
图片显示在这里。
Valid XHTML http://spdc.in/demo/spectra/assets/images/s-tool1.PNG。
最佳答案
Working fiddle。
问题:使用.available
选择器时,它将影响文档中所有类available
的元素。
建议的解决方案:id
在同一文档中应该是唯一的,因此,如果有多个tools
,则应使用有效结构的类替换id
:
<div class="form-group target tools">
然后,您应该在选择器中引用当前元素,因此请使用:
$(sel).closest('.tools').find('.available').html(data);
希望这可以帮助。
关于javascript - 结果随处变化,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41299717/