选择框，搜索如何解决“select2不是函数at（compiled_code）”

时间：2016-06-26 13:03:26

标签： javascript jquery jquery-mobile jquery-select2

我们使用jquery mobile在worklight hybride移动应用程序中使用搜索过滤器选择框。所以我们使用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>

2 个答案:

答案 0 :(得分：0)

我告诉你，有必要将任何脚本保存到标签主体中。 如果您想要单选框，请将属性多个删除到标记脚本中。

<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>

答案 1 :(得分：0)

希望它有效

<!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>
相关问题
最新问题