我已select2通过以下方式下载为节点模块:
npm install select2
并把它包括在我的app.js:
require('select2')($);
webpack时没有错误,但当我打开应用程序时,我得到:
Uncaught TypeError: Object.defineProperty called on non-object(…)
来自select2.js:
S2.define('select2/core',[
'jquery',
'./options',
'./utils',
'./keys'
], function ($, Options, Utils, KEYS) {
(...)
}
是否因为模块封装器select2仅适用于AMD且与CommonJS不兼容而发生？
我试图在ASP.Net中使用SELECT2与下拉列表结合使用.
这是我的.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="ASPNet_SELECT2_1._default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>a SELECT2 implementation in ASP.NET</title>
<script src="scripts/js/jquery-1.12.0.js"></script>
<script src="scripts/js/select2/select2.js"></script>
<link rel="stylesheet" href="css/select2.css" />
<script>
$(document).ready(function () {
$("#" + "<%=dd.ClientID%>").select2({
placeholder: "Select a Subject",
allowClear: true
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="dd" runat="server" ClientIDMode="Static" Width="300px" multiple="multiple"></asp:DropDownList>
</div>
<asp:Button ID="btnGetSelected" runat="server" Text="Get selected items" OnClick="btnGetSelected_Click" /> <asp:Button ID="btnSetSelected" runat="server" Text="Set selected items" OnClick="btnSetSelected_Click" />
<br />
<asp:Literal ID="lit" …我有一个简单的输入和一个select2输入的表单,如下所示:http://codepen.io/anon/pen/QyBxwE
在第一个输入聚焦时按Enter键应该提交表单(在这种情况下,重定向到404页面).
由于某种原因,多个select2输入阻止表单提交.如果我删除select2类或multiple属性,表单行为正常.
在Safari,Chrome和Firefox上的Mac OS X Yosemite上进行了测试,它在所有浏览器上都是一致的.
(我正在使用jQuery 2.1.3和select2 4.0.1)
如何在Select2上的占位符文本之前添加FontAwesome.
这是我的Select2选项代码:
var placeholder = "<i class='fa fa-search'></i> " + "Select a places";
$(".select2").select2({
placeholder: placeholder,
width: null
});
这是我的HTML代码:
<select class="form-control select2">
<option></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
谢谢.
我有一个发票表单,我需要根据需要添加项目.单击相应行上的"添加"按钮时,该行已附加到上一行.但是Select2之后不能正常工作.
我尝试过来自SO的解决方案,其中在克隆之前销毁select然后再次初始化它.但是它在第一行之后初始化了两个select2.
<tr class="tr_clone">
<td>
<div class="input select">
<select required="required" id="Item" class="items select2-hidden-accessible" name="data[Invoice][item_id][]" tabindex="-1" aria-hidden="true">
<option value=""></option>
<option value="1">item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 1+2</option>
<option value="4">Set 1</option>
<option value="5">NURSERY Books</option>
</select><span class="select2 select2-container select2-container--default" dir="ltr" style="width: 231px;"><span class="selection"><span aria-expanded="false" aria-haspopup="true" aria-autocomplete="list" role="combobox" class="select2-selection select2-selection--single" tabindex="0" aria-labelledby="select2-Item-container"><span class="select2-selection__rendered" id="select2-Item-container" title=""></span><span role="presentation" class="select2-selection__arrow"><b role="presentation"></b></span></span>
</span><span aria-hidden="true" class="dropdown-wrapper"></span></span>
</div>
<input type="hidden" id="ItemName" class="item_name" name="data[Invoice][item][]">
<input type="hidden" id="ItemName" class="item_group_id" name="data[Invoice][item_group_id][]"> </td>
<td>
<div class="input text">
<input type="number" required="" min="0" name="data[InvoiceDetail][quantity][]" class="quantity …我是淘汰赛的新手,并试图让我的select2与我的淘汰赛绑定很好地配合.
我想要做的就是将帐户数组绑定到我的select2(这个工作),然后在绑定发生时设置初始值.我出于某种原因不能让这个工作.还注意到init和update函数最初被调用,但是只要我更改select2下拉列表的值,就不会触发更新函数.
任何帮助,将不胜感激.
HTML
<div class="col-sm-12 col-md-3">
<fieldset class="form-group">
<label data-bind="attr:{for:'job'+laborDetailId()}">Job</label>
<select class="select2" data-bind="attr:{id:'job'+laborDetailId()},updateaccountdropdown: {value:account(),data:accounts,width:'100%'}">
</select>
</fieldset>
</div>
JS
var accounts = [{"id":-1,"text":"","description":null}, {"id":25,"text":"J13002","description":null}, {"id":28,"text":"J13053","description":null}];
var LaborListModel = function(laborModels) {
var self = this;
//contains all labor models
self.labordetails = ko.observableArray(laborModels);
self.selectedAccount = ko.observable();
//bindings
ko.bindingHandlers.updateaccountdropdown = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).select2('destroy');
});
var allBindings = allBindingsAccessor(),
select2 = ko.utils.unwrapObservable(allBindings.updateaccountdropdown);
$(element).select2(select2);
},
update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var allBindings = allBindingsAccessor(); …我正在使用select2 v4.0.3和 JQuery。我将选择器初始化为：
$("#datatype").select2({
theme: "classic"
});
$("#unit").select2({
theme: "classic"
});
然后我想检测一个变化#datatype并改变#unit我做的值如下：
$("#datatype").on('select2:select',function () {
$("#unit").val('21'); //udpate unit type to be 'none'
});
问题是值 #unit设置为 21 但该选择器的显示标签没有更新。有什么建议 ？
似乎 select2 不知道该事件，或者尚未正确设置以侦听更改。我不确定解决方案是什么。我是网络技术的新手。
我一直在尝试在生产环境中保存一些ajax调用。为此，我捆绑并缩小了一些脚本，但是我在为select2及其翻译文件苦苦挣扎。
我在build.js中包含了jQuery + bootstrap +（很多deps）+ select2 + select2 i18n文件，并设置了填充值（我认为这不是必需的）。
jQuery和select2均粘贴在i18n文件之前。
添加了以下配置（在生产环境中）：
requirejs.config({
bundles: {
'built': [
'jquery',
'bootstrap',
'highcharts',
'bootbox',
'datatables',
'datatables-bootstrap',
'i18n',
'moment',
'knockout',
'knockout-mapping',
'pnotify',
'pnotify.nonblock',
'pnotify.desktop',
'pnotify.buttons',
'select2/select2',
'select2/i18n/pt-BR',
'select2/i18n/es',
'select2/i18n/en'
]
}
});
但是，当我尝试使用所有缩小的资源加载应用程序时，在控制台上出现错误：
未捕获的TypeError：无法读取未定义的属性'define'
在这行上：
(function(){if(jQuery&&jQuery.fn&&jQuery.fn.select2&&jQuery.fn.select2.amd)var e=jQuery.fn.select2.amd;return e.define("select2/i18n/pt-BR",[],function()
几秒钟后，waitSecondsTimeout过期：
未捕获的错误：模块的加载超时：select2 / i18n / pt-BR，select2 / i18n / es，select2 / i18n / en
没有内置文件，应用程序运行良好。
我想更改其中一个选择框的字体大小.但它不起作用:
http://jsfiddle.net/jEADR/3717/
<link href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
<select id="e1" class="select2" style="width:300px">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
<select id="e2" class="select2" style="width:300px">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
<style>
#e2 .select2-results{
font-size:4px;
}
</style>
<script>
$(".select2").select2();
</script>
我现在正在使用select2下拉插件.我遇到的情况是我必须添加一个select2字段,该字段会自动填充我们应用中的现有邮件ID.我能够这样做,但我还必须添加新的邮件ID,它们不在同一领域的应用程序中.我无法解决这个问题.你能不能帮我解决这个问题......
这是我的视图页面代码.
<input type="hidden" class="select2 to_email w-100" name="to_email[]"
data-role="to_email" data-width="100%" data-placeholder="To" value="">
Js代码:
$('body').on('click','[data-button="reply-mail"],[data-click="reply"]', function() {
attach = [];
var $ti = $(this).closest('[data-role="row-list"]').find('[data-role="reply-mail-wrap"]');
var $to_this = $ti.find('[data-role="to_email"]');
var mail_toadr = $ti.find('input[name="to_addr"]').val();
$($to_this).select2({
placeholder: "Search for a contact",
minimumInputLength: 3,
//maximumSelectionLength: 1,
multiple : true,
ajax: {
url: Utils.siteUrl()+'mailbox/get_all_contacts',
type: 'POST',
dataType: 'json',
quietMillis: 250,
data: function (term, page) {
return {
term: term, //search term
page_limit: 100 // page size
};
},
results: function (data, page) {
return { results: …select2 ×10
jquery ×6
javascript ×4
asp.net ×1
c# ×1
css ×1
font-awesome ×1
forms ×1
knockout.js ×1
npm ×1
php ×1
requirejs ×1
webpack ×1