twitter-bootstrap 通过 JavaScript 填充时出现 Bootstrap Dual Listbox 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19827177/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Dual Listbox problems while populate via JavaScript
提问by anevil
I have some problem while using Bootstrap Dual Listbox (http://www.virtuosoft.eu/code/bootstrap-duallistbox/). It is not working as expected when the ListBox is populated via java Script.What I mean with not working is the list is not populated properly and the transferring selected items from both list box is not as what as it should work. Somehow when the list is populated by hard coded, it is working well.
我在使用 Bootstrap Dual Listbox ( http://www.virtuosoft.eu/code/bootstrap-duallistbox/) 时遇到了一些问题。当 ListBox 通过 java Script 填充时，它无法按预期工作。不知何故，当列表由硬编码填充时，它运行良好。
This is the part where everything working fine :
这是一切正常的部分：
<div class="row-fluid">
<div class="container">
<select multiple="multiple" size="10" name="SelectItem" class="eItems" id="SelectItem">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3" selected="selected">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6" selected="selected">Option 6</option>
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
</select>
<script type="text/javascript">
var demo2 = $('.eItems').bootstrapDualListbox({
nonselectedlistlabel: 'Non-selected',
selectedlistlabel: 'Selected',
preserveselectiononmove: 'moved',
moveonselect: false,
bootstrap2compatible : true
});
</script>
</div>
</div>
but when populate using JavaScript, it is populated but the functions is not functioning well :
但是当使用 JavaScript 填充时，它被填充但功能不能正常运行：
The data collector from Controller :
Controller 的数据收集器：
<script type="text/javascript">
function ProductChange() {
$.getJSON("/WEBAPP/MasterData/GetItems", null, function (data) {
var items;
$.each(data, function (i, item) {
items += "<option value=" + item.Value + ">" + item.Key + "</option>";
});
$("#SelectItem").html(items);
})
}
</script>
The list box populating here :
列表框在此处填充：
<div class="row-fluid">
<div class="row-fluid">
<div class="container">
<select id="SelectProduct"></select>
</div>
</div>
<div class="row-fluid">
<div class="container">
<select multiple="multiple" size="10" name="SelectItem" class="eItems" id="SelectItem"></select>
<script type="text/javascript">
var demo2 = $('.eItems').bootstrapDualListbox({
nonselectedlistlabel: 'Non-selected',
selectedlistlabel: 'Selected',
preserveselectiononmove: 'moved',
moveonselect: false,
bootstrap2compatible : true
});
$(function () {
$("#SelectProduct").change(function () {
ProductChange();
});
});
</script>
</div>
</div>
</div>
The controller :
控制器：
[HttpGet]
public JsonResult GetItems(int productID = 0)
{
try
{
var items =
from item in dbItem.items.ToList()
join p in dbItem.Productitems.ToList()
on item.itemID equals p.itemID
where item.Language.LanguageCode.Trim() == repLanguage
where p.ProductID == productID
orderby item.DisplaySequence
select new { Key = item.itemDescription, Value = item.itemID };
if (items.Count() == 0)
{
items = from item in dbItem.items.ToList()
where item.Language.LanguageCode.Trim() == repLanguage
orderby item.DisplaySequence
select new { Key = item.itemDescription, Value = item.itemID };
}
return Json(items, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
return Json(new { Result = "ERROR", Message = ex.Message });
}
}
Is it because the java script is reloaded every time the trigger action takes place? Apologize if the explanation is not so clear and just let me know if u need more information.
是不是因为每次触发动作发生时都会重新加载java脚本？如果解释不是很清楚，请道歉，如果您需要更多信息，请告诉我。
Thanks a lot
非常感谢
回答by anevil
I cannot populate the list box properly by calling and a populate function directly as normal drop down. I changed the populate code as below
我无法通过直接调用填充函数来正确填充列表框，就像正常的下拉菜单一样。我将填充代码更改如下
<select multiple="multiple" size="10" name="SelectItem" class="eItems" id="SelectItem"></select>
<script type="text/javascript">
var demo2 = $('.eItems').bootstrapDualListbox({
nonselectedlistlabel: 'Non-selected',
selectedlistlabel: 'Selected',
preserveselectiononmove: 'moved',
moveonselect: false,
bootstrap2compatible: true
});
$(function () {
$("#SelectProduct").change(function () {
$('#SelectItem').empty();
demo2.trigger('bootstrapduallistbox.refresh');
$.getJSON("/WEBAPP/MasterData/GetItems", { productID: $("#SelectProduct").val() }, function (data) {
var items;
$.each(data, function (i, item) {
demo2.append("<option value=" + item.Value + ">" + item.Key + "</option>");
});
demo2.trigger('bootstrapduallistbox.refresh');
})
});
});
</script>
From my understanding, the list items are re-populate using original code.
Correct me if I am wrong.
根据我的理解，列表项是使用原始代码重新填充的。
如果我错了，请纠正我。
回答by Moises Tapia
You should try something like this:
你应该尝试这样的事情：
demo2.trigger('bootstrapDualListbox.refresh' , true);
This works form me!
这对我有用！
回答by Bill
For me, bootstrapDualListboxis case sensitive - bootstrapduallistboxdid not work.
I wanted to post this in case any body else has this issue.
对我来说，bootstrapDualListbox区分大小写 -bootstrapduallistbox不起作用。
我想张贴这个以防万一其他人有这个问题。
