在这个小而完整的例子中,我试图重新创建一个双列表框UI组件.我只希望能够将物品从一个盒子移动到另一个盒子.(如果我可以添加排序会很好,但我认为这是一个障碍!)
我在IE7中遇到此代码的问题(FF,Chrome,Opera似乎都工作正常).每当我将项目从一个列表移动到另一个列表时,选择框会调整(缩小)每次迭代.我不确定我在哪里出错了,有人可以提供一些见解吗?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dual List Testing</title>
<link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function(){
//hover states on the static widgets
$('.dual-box > .button-panel > .button').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
// Hack the buttons of the dual-list to the centre (couldn't figure out a css solution)
$(function(){
$('#dualBox1 .button-panel').css("padding-top",($('.button-panel').height()-(34*4))/2); // v-centre
$('#dualBox1 .button').css("margin-left", ($('.button-panel').width()-34)/2); // h-centre
});
$(function(){
$('#dualBox1 .add').click(function () …Run Code Online (Sandbox Code Playgroud) JQGrid中的多重选择只允许多项选择或单项选择,并且换档功能不是我期望的换档选择.我也不喜欢我们需要多选的组合框.
我可以使用什么其他解决方案进行多选?
基本上,我有一个控件,我想从Selector类扩展.我知道Selector允许选择多个子项,但我不希望这样.我只希望一次选择一个孩子.
是否有一个我在Selector类中没有看到的设置区分允许的单个/多个选择,或者是由我编写的扩展Selector类的类控制的东西?
我在表单中使用 select2 作为多选选项。在表单中,我使用按键控件来遍历表单。因此,如果我按 Tab 键,它应该遍历表单中的字段。当我按 Tab 转到 select2 文本框时,它打开默认选择第一项的选项。当我按 Tab 移动到另一个字段时,它会自动选择。我想避免这种情况。请帮助...
我想避免在 select2 插件中默认选择第一个元素。我在调用 select2 时尝试删除highlight() 函数。它正在工作,但无法选择元素。
$("#" + elementID).select2({
data: {results: itemArray, name: 'name'},
formatSelection: format,
formatResult: format,
multiple: true,
closeOnSelect: false,
height: height,
width: width,
allowClear:true,
initSelection: function (element, callback) {
var data = [];
$(element.val().split(",")).each(function () {
data.push({id: this.toString(), name: this.toString()});
});
return callback(data);
},
createSearchChoice: function (term, data) {
if ($(data).filter(function () {
return this.name.localeCompare(term) === 0;
}).length === 0) {
return {id: term, name: term}; …Run Code Online (Sandbox Code Playgroud) 点击"选择黄色"按钮,我想在所选列表中添加黄色.黄色正在被选中,但下拉列表仍显示黄色.以同样的方式,我想点击"取消选择黄色"按钮取消选择黄色.我能够取消选择黄色,但下拉列表中没有出现黄色.请帮我解决这个问题.HTML:
<ui-select multiple ng-model="multipleDemo.colors" theme="select2" ng-disabled="disabled" style="width: 300px;">
<ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
<ui-select-choices repeat="color in availableColors | filter:$select.search">
{{color}}
</ui-select-choices>
</ui-select>
<p>Selected: {{multipleDemo.colors}}</p>
<input type="button" value="select yellow color" ng-click="selectYellowColor()"/>
<input type="button" value="deselect yellow color" ng-click="deselectYellowColor()"/>
Run Code Online (Sandbox Code Playgroud)
JS:
$scope.availableColors = ['Red','Green','Blue','Yellow','Magenta','Maroon','Umbra','Turquoise'];
$scope.multipleDemo = {};
$scope.multipleDemo.colors = ['Blue','Red'];
$scope.selectYellowColor = function(){
if($scope.multipleDemo.colors.indexOf($scope.availableColors[3]) == -1){
$scope.multipleDemo.colors.push($scope.availableColors[3]);
}
};
$scope.deselectYellowColor = function(){
if($scope.multipleDemo.colors.indexOf($scope.availableColors[3]) != -1){
var index = $scope.multipleDemo.colors.indexOf($scope.availableColors[3]);
$scope.multipleDemo.colors.splice(index, 1);
}
};
Run Code Online (Sandbox Code Playgroud)
这是plunker链接 http://plnkr.co/edit/AHZj1zAdOXIt6gICBMuN?p=preview
我想从angularJS中的选定复选框项中获取逗号分隔的字符串.同时,当从数据库中恢复逗号分隔的字符串时,我希望相应地检查复选框.
<div class="col-md-5">
<input type="checkbox" ng-model="Drawings.CarMDrawings" ng-change="Update(Drawings)"> Car
<br />
<input type="checkbox" ng-model="Drawings.SignalMDrawings" ng-change="Update(Drawings)"> Signal
<br />
<input type="checkbox" ng-model="Drawings.DoorMDawings" ng-change="Update(Drawings)"> Door
<br />
</div>
Run Code Online (Sandbox Code Playgroud)
我以非常简单的方式解决了问题是Plunker http://plnkr.co/edit/YYd5bN5Chmyjt6gSH1Bw?p=preview
$scope.Update = function(Drawings) {
var str = "";
if (Drawings.CarMDrawings) {
str = "Car";
}
if (Drawings.SignalMDrawings) {
str = str + ",Signal";
}
if (Drawings.DoorMDawings) {
str = str + ",Door";
}
if (str.charAt(0) === ',') {
str = str.substr(1);
}
$scope.data = str;
}
$scope.revUpdate = function(data) {
var str = …Run Code Online (Sandbox Code Playgroud) 我正在尝试将Angularjs multi-select用于我的项目.
以下html是我的多选div.
<div
multi-select
input-model="marks"
output-model="filters.marks"
button-label="name"
item-label="name"
tick-property="ticked"
selection-mode="multiple"
helper-elements="all none filter"
on-item-click="fClick( data )"
default-label="Select marks"
max-labels="1"
max-height="250px"
>
</div>
Run Code Online (Sandbox Code Playgroud)
我知道我可以在控制器中使用$ scope.marks = data.
但问题是$ scope.marks是一个全局变量,我无法改变..
有没有办法在不使用输入模型的情况下在多选中设置值?
这是一个很简短的问题:最近谷歌更新了它的材料设计指南,表明多选项目应该像谷歌照片应用程序(这里),如下:
我注意到即使你已经处于多选模式,你仍然可以在任何你想要的地方使用这个手势。
到目前为止,我所做的是处理点击项目以进行多选,但我该如何做 Google 所展示的?
我一直在尝试没有成功让多选择按预期运行.我可以像下面这样包装multiSelect调用并且它可以工作,但由于某种原因,如果它没有像直接的示例代码那样包装,它就不起作用.
(function ($) {
$(function () {
$('#mySelectList').multiSelect();
})
})(jQuery);
Run Code Online (Sandbox Code Playgroud)
如果我可以打电话,我可以克服这种烦恼 $('#keep-order').multiSelect('select', 'whatIwant');
但是,如果我理解正确的话,由于范围的原因,调用multiselect select在其他地方不起作用.
如果有帮助的话,这就是我现在的意思.为了澄清,除了标有"不起作用"的位之外,以下内容将起作用.
这是html加载脚本:
<link type="text/css" href="~/css/multiselect/multiselect.css" rel="stylesheet" />
<link type="text/css" href="~/css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="~/js/quicksearch/jquery.quicksearch.js"></script>
<script type="text/javascript" src="~/js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="~/js/multiselect/multiselect.js"></script>
<script type="text/javascript" src="~/Scripts/myjavascript.js"></script>
Run Code Online (Sandbox Code Playgroud)
myjavascript.js的内容
// This is a combination of quicksearch and multiselect.
; (function ($) {
$(function () {
$('#mySelectList').multiSelect({
keepOrder: true,
selectableHeader: "<div class='searchTitle'>Select: Sap</div><input type='text' id='searchSelectable' class='search-input' autocomplete='off' placeholder='Search: Sap'>",
selectionHeader: "<div class='searchTitle'>Selection:</div><input type='text' class='search-input' autocomplete='off' placeholder='Search: Selection'>", …Run Code Online (Sandbox Code Playgroud) 我现在正在开发一个 android 应用程序,我需要在下拉列表中加载所有国家/地区列表。我的用户要求添加多选下拉列表,如下所示,我们使用 JQuery 在 web 中使用....
我正在搜索这种类型的下拉列表,但还没有得到任何解决方案。我该如何解决这个需求?任何建议都受到高度赞赏。
提前致谢。
注意:我发现以下类型的下拉列表未被我的用户接受。