我的Select2 3.4.5不能使用JSON数据.
这是HTML上的输入框:
<input class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' />
Run Code Online (Sandbox Code Playgroud)
......和我的JavaScript
$(".itemSearch").select2({
placeholder: "Search for an Item",
minimumInputLength: 2,
ajax: {
url: "/api/productSearch",
dataType: 'json',
quietMillis: 100,
data: function (term, page) {
return {
option: term
};
},
results: function (data, page) {
var more = (page * 10) < data.total;
return {
results: data.itemName,
more: more
};
}
},
formatResult: function (data, term) {
return data;
},
formatSelection: function (data) {
return data;
},
dropdownCssClass: "bigdrop",
escapeMarkup: …Run Code Online (Sandbox Code Playgroud) 好吧,我确定这里有一些简单的设置错误,但我不是100%它是什么.
所以我试图使用Select2 AJAX方法作为用户搜索数据库和选择结果的方式.呼叫本身会返回结果,但不允许我从列表中选择答案.它似乎也不允许您在悬停或向上/向下箭头上"选择"它.所以不用多说,这是我的代码:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="select2/select2.css" media="screen" />
<script src="select2/select2.js"></script>
<script src="select.js"></script>
</head>
<body>
<input type="text" style="width: 500px" class="select2">
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
jQuery(function() {
var formatSelection = function(bond) {
console.log(bond)
return bond.name
}
var formatResult = function(bond) {
return '<div class="select2-user-result">' + bond.name + '</div>'
}
var initSelection = function(elem, cb) {
console.log(elem)
return elem
}
$('.select2').select2({
placeholder: "Policy Name",
minimumInputLength: 3,
multiple: false,
quietMillis: 100,
ajax: {
url: "http://localhost:3000/search",
dataType: 'json',
type: …Run Code Online (Sandbox Code Playgroud) 我正在用select2进行标记
我对select2有这些要求:
这两个场景都是独立运作的 但加在一起的aJax值只是填充.如果我们输入不在列表中的任何其他值,则表示"找不到匹配项"
我的场景如果用户键入列表中没有的任何新值,请允许他们组成自己的标记.
有什么办法使这项工作?
我正在使用select2库进行搜索.
有没有办法在选择搜索结果后触发操作?例如打开弹出窗口或简单的js警报.
$("#e6").select2({
placeholder: "Enter an item id please",
minimumInputLength: 1,
ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
url: "index.php?r=sia/searchresults",
dataType: 'jsonp',
quietMillis: 3000,
data: function (term, page) {
return {
q: term, // search term
page_limit: 10,
id: 10
};
},
results: function (data, page) { // parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not …Run Code Online (Sandbox Code Playgroud) 我正在使用select2控件,通过ajax 加载数据.这需要使用<input type=hidden..>标签.
现在,我想检索选定的文本.(表达式中的value属性仅为data-bindsotres id)
我试过了$(".select2-chosen").text(),但是当我在页面上有多个select2控件时,这会中断.
我有两个链接的选择:第一个选择的每个值确定将在第二个选择中显示哪些项目.
第二个选择的值存储在二维数组中:
[ [{"id":1,"text":"a"}, {"id":2,"text":"b"},...],
[{"id":"1a","text":"aa"},{"id":"1b","text":"ba"},...],
...
]
Run Code Online (Sandbox Code Playgroud)
第一个选择值确定用于填充第二个选择的索引.所以在第一个"更改"事件中我应该能够修改select-two包含的项目.
阅读文档我认为我需要使用"数据"选项...但不知道如何在初始化时加载数组数据,如果我在初始化后尝试执行相同操作,它似乎不起作用.
HTML
Attribute:
<select name="attribute" id="attribute">
<option value="0">Color</option>
<option value="1">Size</option>
</select>
Value:
<select name="value" id="value"></select>
<script>
var data = [ [{"id":1,"text":"black"}, {"id":2,"text":"blue"},...],
[{"id":"1","text":"9"},{"id":"1","text":"10"},...],
];
$('#attribute').select2().bind('change', function(){
// Here I need to change `#value` items.
$('#value').select2('data',data[$(this).val()]); // This does not work
);
$('#value').select2();
</script>
Run Code Online (Sandbox Code Playgroud) 将所选项目重置为默认值的最佳方法是什么?我正在使用Select2库,当使用普通按钮时type="reset",下拉列表中的值不会重置.
因此,当我按下我的按钮时,我希望再次显示"全部".
jQuery的
$("#d").select2();
Run Code Online (Sandbox Code Playgroud)
HTML
<select id="d" name="d">
<option selected disabled>All</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Run Code Online (Sandbox Code Playgroud) 我喜欢来自https://github.com/ivaynberg/select2的select2框 我使用format:选项来格式化每个元素,它看起来很棒.
一切都很好,除了由于图像选定的元素大于选择框的高度.
我知道如何更改宽度,但是如何更改高度以便在选择元素之后,它会显示完整的内容(约150px)
这是我的启蒙:
<script>
$("#selboxChild").select2({
matcher: function(term, text) {
var t = (js_child_sponsors[text] ? js_child_sponsors[text] : text);
return t.toUpperCase().indexOf(term.toUpperCase()) >= 0;
},
formatResult: formatChild,
formatSelection: formatChild,
escapeMarkup: function(m) {
return m;
}
});
</script>
Run Code Online (Sandbox Code Playgroud)
这是我的选择框
<select id="selboxChild" style="width: 300px; height: 200px">
<option value="">No child attached</option>
</select>
Run Code Online (Sandbox Code Playgroud)
要澄清:我不希望每个选项的高度都改变 我在选择一个孩子后我正在寻找选择框来改变高度.
因此,当页面首次加载时,显示"未选择子项"当您单击下拉菜单并选择一个孩子时,您会看到孩子的图像.现在我需要选择框来扩展!否则孩子的照片会被切断.
有人明白吗?
我有一个针对ui-select2下拉模型的手表设置(来自ui-bootstrap).手表会在负载时触发但不会在数据更改时触发,我无法弄清楚原因.
这不是通常的问题,即不应用模型更改或不使用第三个参数进行相等性比较(至少从我的代码中).
我需要做些什么来解雇它?
我希望能够使用JQuery Select2插件设置select元素的默认/选定值.
jquery-select2 ×10
javascript ×7
jquery ×6
ajax ×1
angularjs ×1
forms ×1
html ×1
html-select ×1
json ×1
knockout-2.0 ×1
laravel ×1
search ×1
ui-select2 ×1