select 框搜索如何解决 "select2 is not a function at (compiled_code)"

Question

我们使用 jquery 移动设备在 worklight hybride 移动应用程序中使用带有搜索过滤器的 select 框。所以我们使用 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>

Answer 1

我告诉你，有必要将任何脚本保留在标签体中。如果你想要单个 select 个框，请将属性 multiple 删除到标记脚本中。

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

Answer 2

希望有用

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

select 框搜索如何解决 "select2 is not a function at (compiled_code)"

select box with searching how to resolve "select2 is not a function at (compiled_code)"

javascript

jquery

jquery-mobile

jquery-select2