带搜索的选择框如何解析“select2不是(compiled_code)"的函数”
select box with searching how to resolve "select2 is not a function at (compiled_code)"
我们使用jquery在worklight混合移动应用程序中使用搜索过滤器选择框。所以我们使用Select2插件。
我得到了这样的错误:select2不是一个函数在(compiled_code)。我在下面添加了什么，请找到。谁能帮我解决这个错误?
当我在我的项目中集成
index . html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>QLM</title>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href="dist/css/select2.min.css" type="text/css" rel="stylesheet" />
<script src="dist/js/jquery.js"></script>
<script src="dist/js/select2.min.js"></script>
<script>window.$ = window.jQuery = WLJQ;</script>
<link rel="stylesheet" type="text/css" id="loadcss" />
<link rel="stylesheet" type="text/css" id="loadcss1" />
<script type="text/javascript"
src="lib/jquery-mobile/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript"
src="lib/jquery-mobile-router/js/jquery.mobile.router.min.js"></script>
<script type="text/javascript"
src="lib/jquery-mobile/js/jquery.mobile-1.4.0.min.js"></script>
<link rel="stylesheet"
href="lib/jquery-mobile/css/jquery.mobile-1.4.0.min.css" />
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2VMMoklmxRaYy1NvJ1Et8PjF2h4mcZEM"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<script src="js/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/datepickerr.css">
<link rel="stylesheet" type="text/css" href="css/datepickertheme.css">
<link rel="stylesheet" type="text/css" href="css/wickedpicker.css">
<script src="js/datepicker.js"></script>
<script src="js/wickedpicker.js"></script>
</head>
<body style="display: none;">
<!--- Login--->
<div data-role="page" id="home">
<div id="loadhome">
<div role="main" class="ui-content" style="margin-top:31px;background: transparent !important;">
</div>
</div>
</div>
<div data-role="page" id="lang">
<div role="main" class="ui-content" style="margin-top:34%;background: transparent !important;">
<div class="text-center bottomspacer">
<img src="img/logo.png" width="30%">
</div>
<h2 class="text-center bottomspacer" >Choose Preferred Language</h2>
<h4 class="text-center bottomspacer" >اختÙار اÙÙغة اÙÙÙضÙØ©</h4>
<div style="width:100%">
<span class="english" id="langEn" onclick="navToLogin('login','en')" style="float:left ">English</span>
<span class="qatra" id="langAr" onclick="navToLogin('login','ar')" style="float:right ">اÙعربÙØ©</span>
</div>
</div>
</div>
<div data-role="page" id="provider">
<div id="loadprovider"></div>
</div>
<script type="text/javascript" src="lib/fastclick/js/fastclick.js"></script>
<script type="text/javascript"
src="lib/handlebars/js/handlebars-v1.3.0.js"></script>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
<script src="js/jquery-gauge.min.js"></script>
<script src="js/navigation.js"></script>
<script src="js/common.js"></script>
<script src="js/login.js"></script>
<script src="js/reg.js"></script>
<script src="js/langpreffer.js"></script>
<script src="js/mngprof.js"></script>
<script src="js/dashbrd.js"></script>
<script src="js/policy.js"></script>
<script src="js/benefitlimitspol.js"></script>
<script src="js/clmsexp.js"></script>
<script src="js/clmssub.js"></script>
<script src="js/clmstrkng.js"></script>
<script src="js/preaprvl.js"></script>
<script src="js/preaprovaltracking.js"></script>
<script src="js/phamcy.js"></script>
<script src="js/healthcertpol.js"></script>
<script src="js/insurancecard.js"></script>
<script src="js/hlthrcrds.js"></script>
<script src="js/prvdr.js"></script>
<script src="js/bmicaltr.js"></script>
<script src="js/emgcyno.js"></script>
<script src="js/hlthtips.js"></script>
<script src="js/prvdrslistdtls.js"></script>
<script src="js/showmaps.js"></script>
<script src="js/qlmchat.js"></script>
<script src="js/pushnotification.js"></script>
<script src="js/mediRem.js"></script>
</body>
</html>provider.html
/*provider.js*/
$(".js-example-responsive").select2({
placeholder: "Select a state",
language: "es",
theme: "classic"
});/*provider.html*/
<div data-role="header" data-position="fixed" class="top-panel">
<a onClick="navBack()" href="#" class="backbtn hdrIcn backIcn back"><img
src="img/back.png" width="26%" id="" alt=""></a>
<h1 id="lblHdrPrvdrSrch"></h1>
</div>
<img src="img/provider-bg.png" width="100%">
<div role="main" class="ui-content bodyTop">
<p id="errIdPrvdrSrch" class="error"></p>
<select class="js-example-responsive" style="width: 50%">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<button class="view-table" style="text-align: center !important"
id="btnSrchPrvdrSrch"></button>
</div>希望能成功
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>QLM</title>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href="dist/css/select2.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" id="loadcss" />
<link rel="stylesheet" type="text/css" id="loadcss1" />
<link rel="stylesheet" href="lib/jquery-mobile/css/jquery.mobile-1.4.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/datepickerr.css">
<link rel="stylesheet" type="text/css" href="css/datepickertheme.css">
<link rel="stylesheet" type="text/css" href="css/wickedpicker.css">
</head>
<body style="display: none;">
<!--- Login--->
<div data-role="page" id="home">
<div id="loadhome">
<div role="main" class="ui-content" style="margin-top:31px;background: transparent !important;">
</div>
</div>
</div>
<div data-role="page" id="lang">
<div role="main" class="ui-content" style="margin-top:34%;background: transparent !important;">
<div class="text-center bottomspacer">
<img src="img/logo.png" width="30%">
</div>
<h2 class="text-center bottomspacer" >Choose Preferred Language</h2>
<h4 class="text-center bottomspacer" >اختÙار اÙÙغة اÙÙÙضÙØ©</h4>
<div style="width:100%">
<span class="english" id="langEn" onclick="navToLogin('login','en')" style="float:left ">English</span>
<span class="qatra" id="langAr" onclick="navToLogin('login','ar')" style="float:right ">اÙعربÙØ©</span>
</div>
</div>
</div>
<div data-role="page" id="provider">
<div id="loadprovider"></div>
</div>
<script src="dist/js/jquery.js"></script>
<script src="dist/js/select2.min.js"></script>
<script>window.$ = window.jQuery = WLJQ;</script>
<script type="text/javascript" src="lib/jquery-mobile/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="lib/jquery-mobile-router/js/jquery.mobile.router.min.js"></script>
<script type="text/javascript" src="lib/jquery-mobile/js/jquery.mobile-1.4.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2VMMoklmxRaYy1NvJ1Et8PjF2h4mcZEM"></script>
<script src="js/datepicker.js"></script>
<script src="js/wickedpicker.js"></script>
<script type="text/javascript" src="lib/fastclick/js/fastclick.js"></script>
<script type="text/javascript" src="lib/handlebars/js/handlebars-v1.3.0.js"></script>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
<script src="js/jquery-gauge.min.js"></script>
<script src="js/navigation.js"></script>
<script src="js/common.js"></script>
<script src="js/login.js"></script>
<script src="js/reg.js"></script>
<script src="js/langpreffer.js"></script>
<script src="js/mngprof.js"></script>
<script src="js/dashbrd.js"></script>
<script src="js/policy.js"></script>
<script src="js/benefitlimitspol.js"></script>
<script src="js/clmsexp.js"></script>
<script src="js/clmssub.js"></script>
<script src="js/clmstrkng.js"></script>
<script src="js/preaprvl.js"></script>
<script src="js/preaprovaltracking.js"></script>
<script src="js/phamcy.js"></script>
<script src="js/healthcertpol.js"></script>
<script src="js/insurancecard.js"></script>
<script src="js/hlthrcrds.js"></script>
<script src="js/prvdr.js"></script>
<script src="js/bmicaltr.js"></script>
<script src="js/emgcyno.js"></script>
<script src="js/hlthtips.js"></script>
<script src="js/prvdrslistdtls.js"></script>
<script src="js/showmaps.js"></script>
<script src="js/qlmchat.js"></script>
<script src="js/pushnotification.js"></script>
<script src="js/mediRem.js"></script>
</body>
</html>
如果没有，把这段代码放在select2 js
之后<script src="dist/js/select2.min.js"></script>
<script>
$(".js-example-responsive").select2({
placeholder: "Select a state",
language: "es",
theme: "classic"
});
<script>
我将告诉您，有必要将任何脚本保存在标记体中。如果您想要单个选择框，请将属性multiple移到标签script中。
<select multiple="multiple" ....> to <select ....>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Select</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<!--
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
-->
<link href="dist/css/select2.min.css" type="text/css" rel="stylesheet" />
<link href="jqueryMobile/jquery.mobile-1.4.5.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body style="display: none;">
<div data-role="page" id="page">
<div data-role="content" style="padding: 15px">
<label for="id_label_multiple">
Click this to highlight the multiple select element
<select class="js-example-basic-multiple js-states form-control" id="id_label_multiple" multiple="multiple">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
<option value="Option 4">Option 4</option>
<option value="Option 5">Option 5</option>
<option value="Option 6">Option 6</option>
<option value="Option 7">Option 7</option>
<option value="Option 8">Option 8</option>
<option value="Option 9">Option 9</option>
<option value="Option 10">Option 10</option>
<option value="Option 11">Option 11</option>
<option value="Option 12">Option 12</option>
<option value="Option 13">Option 13</option>
<option value="Option 14">Option 14</option>
<option value="Option 15">Option 15</option>
<option value="Option 16">Option 16</option>
<option value="Option 17">Option 17</option>
<option value="Option 18">Option 18</option>
<option value="Option 19">Option 19</option>
<option value="Option 20">Option 20</option>
<option value="Option 21">Option 21</option>
<option value="Option 22">Option 22</option>
</select>
</label>
</div>
</div>
<script src="dist/js/jquery.js"></script>
<script>window.$ = window.jQuery = WLJQ;</script>
<script src="jqueryMobile/jquery.mobile-1.4.5.js"></script>
<script src="dist/js/select2.min.js"></script>
<script>
$('.js-example-basic-multiple').select2();
</script>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
相关文章：
- 创建一个类似链接的按钮，并通过Javascript函数打开一个新的弹出窗口
- 将函数的上下文应用于javascript变量
- 如何在JavaScript中将字符串转换为函数引用
- 用嵌套函数和默认函数定义函数
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 无法导出函数expressjs/requestjs中的变量
- 函数参数中的数据与指定变量之间的任何性能差异
- JQuery合并了keyup和focusout两个函数
- ES6构造函数返回基类的实例
- 监视函数从服务返回不起作用，但作用域函数起作用
- 我可以在json对象中添加一个函数吗
- 从Dart Code调用匿名Javascript函数
- 在 jQuery Code 中调用 JavaScript 函数
- 从Javascript调用Code-Behind函数
- 这个语法是什么意思?(函数(）｛//code｝）(）
- 使用Parse Code Cloud Javascript函数更改Parse列的值
- 声明函数的目的是什么！函数(）｛code｝(）;
- code-behind-从JavaScript确认框调用函数
- 访问Parse.com Cloud Code beforeSave函数中的原始字段
- 如何将输入数组传递给JavaScript函数，以便在Visual Studio Code中进行测试
