Question

我们使用jquery mobile 1.4.0 开发混合移动应用程序。在这个项目中有这么多选择菜单列表，选择字段很少是短列表而很少是长列表。什么长或短的选择菜单列表我们必须在可筛选的内部选择菜单列表中显示。

因此要求我们在项目中使用select2 plugin 。但没有发生任何默认的jquery移动选择菜单正在显示，但示例项目工作正常我们有什么要求即将到来，但在我的投射我遵循的相同步骤，但没有发生任何为什么不做的事。

我们不希望Jquery Mobile Select菜单列表小部件我们只需要Select2插件。

任何人请帮助我，在我错过了我必须遵循的地方，我们现在正在结束项目的雄鹿。

错误如下所示

$（...）。select2不是函数

屏幕截图

我的项目代码

<!--- Index.html --->

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>My Project</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">
<script>window.$ = window.jQuery = WLJQ;</script>
<link rel="stylesheet" type="text/css" id="loadcss" />
<link rel="stylesheet" type="text/css" id="loadcss1" />
<script src="dist/js/jquery.js"></script>
	<script src="dist/js/select2.min.js"></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>
<link rel="stylesheet"
	href="lib/jquery-mobile/css/jquery.mobile-1.4.0.min.css" />
	
<link href="dist/css/select2.min.css" type="text/css" rel="stylesheet" />	

<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="login">
		<div id="loadlogin"></div>
	</div>

	<div data-role="page" id="reg">
		<div id="loadreg"></div>
		<div align="center">
			<div data-role="popup" id="uploadreg" data-overlay-theme="b"
				class="popUpDiv" style="left: 0% !important;" data-theme="a"
				data-corners="false" align="center">
				<ul data-role="listview" id="popupReg" class="popUpUi"
					data-inset="true">
					<li onclick="getPhoto(pictureSource.PHOTOLIBRARY);" class="popUpLi">
						<label id="galleryreg" class="popUpLbl"
						style="margin-top: 16px; font-size: 25px !important; color: #a61735;"></label>
					</li>
					<li onclick="capturePhoto();" class="popUpLi2"><label
						id="capturereg" class="popUpLbl"
						style="margin-top: 16px; font-size: 25px !important; color: #a61735;"></label>
					</li>
				</ul>
			</div>
		</div>
	</div>

	<div data-role="page" id="dashbrd">
		<div id="loaddashbrd"></div>
	</div>

	<div data-role="page" id="vstrdashbrd">
		<div id="loadvstrdashbrd"></div>
	</div>

	<div data-role="page" id="mngprof">
		<div id="loadmngprof"></div>
		<div align="center">
			<div data-role="popup" id="uploadmngprof" data-overlay-theme="b"
				class="popUpDiv" style="left: 0% !important;" data-theme="a"
				data-corners="false" align="center">
				<ul data-role="listview" id="popupmngprof" class="popUpUi"
					data-inset="true">
					<li onclick="getPhoto(pictureSource.PHOTOLIBRARY);" class="popUpLi">
						<label id="gallerymngprof" class="popUpLbl"
						style="margin-top: 16px; font-size: 25px !important; color: #a61735;"></label>
					</li>
					<li onclick="capturePhoto();" class="popUpLi2"><label
						id="capturemngprof" class="popUpLbl"
						style="margin-top: 16px; font-size: 25px !important; color: #a61735;"></label>
					</li>
				</ul>
			</div>
		</div>
	</div>

	<div data-role="page" id="policy">
		<div id="loadpolicy"></div>
	</div>

	<div data-role="page" id="benefitlimitspol">
		<div id="loadbenefitlimitspol"></div>
	</div>

	<div data-role="page" id="healthcertpol">
		<div id="loadhealthcertpol"></div>
	</div>

	<div data-role="page" id="insurancecard">
		<div id="loadinsurancecard"></div>
	</div>

	<div data-role="page" id="srvc">
		<div id="loadsrvc"></div>
	</div>

	<div data-role="page" id="emgcyno">
		<div id="loademgcyno"></div>
	</div>

	<div data-role="page" id="bmicaltr">
		<div id="loadbmicaltr"></div>
	</div>

	<div data-role="page" id="hlthtips">
		<div id="loadhlthtips"></div>
	</div>

	<div data-role="page" id="mediRem">
		<div id="loadmediRem" class="calOpacity"></div>
	</div>

	<div data-role="page" id="showNotifications">
		<div id="loadshowNotifications"></div>
	</div>

	<div data-role="page" id="clms">
		<div id="loadclms"></div>
	</div>

	<div data-role="page" id="clmsSub">
		<div id="loadclmsSub" class="calOpacity"></div>
	</div>

	<div data-role="page" id="clmstrkng">
		<div id="loadclmstrkng"></div>
	</div>

	<div data-role="page" id="clmsexp">
		<div id="loadclmsexp"></div>
	</div>

	<div data-role="page" id="preaprvl">
		<div id="loadpreaprvl" class="calOpacity"></div>
	</div>

	<div data-role="page" id="preaprovaltracking">
		<div id="loadpreaprovaltracking"></div>
	</div>

	<div data-role="page" id="pharmacy">
		<div id="loadpharmacy"></div>
	</div>

	<div data-role="page" id="hlthrcrds">
		<div id="loadhlthrcrds" class="calOpacity"></div>
	</div>

	<div data-role="page" id="shwtrkdtls">
		<div id="loadshwtrkdtls"></div>
	</div>

	<div data-role="page" id="provider">
		<div id="loadprovider"></div>
	</div>

	<div data-role="page" id="providerlist">
		<div id="loadproviderlist"></div>
	</div>

	<div data-role="page" id="providerdetails">
		<div id="loadproviderdetails"></div>
	</div>

	<div data-role="page" id="prvdrsshowonmap">
		<div id="loadprvdrsshowonmap"></div>
	</div>

	<div data-role="page" id="prvdrsMap">
		<div id="loadprvdrsMap"></div>
	</div>

	<div data-role="page" id="about">
		<div id="loadabout"></div>
	</div>

	<div data-role="page" id="contactus">
		<div id="loadcontactus"></div>
	</div>

	<div data-role="page" id="help">
		<div id="loadhelp"></div>
	</div>

	<div data-role="page" id="chat">
		<div id="loadchat"></div>
	</div>
	
	<div data-role="page" id="pushNotifications">
		<div id="loadpushNotifications"></div>
	</div>

	<div data-role="popup" id="upload" data-overlay-theme="b"
		class="popUpDiv" style="left: 0% !important;" data-theme="a"
		data-corners="false" align="center">
		<ul data-role="listview" id="" data-inset="true" class="popUpUi">
			<li class="popUpLi" id="clmGal"
				onclick="getSavedDoc(navigator.camera.PictureSourceType.PHOTOLIBRARY);">
				<label id="gallery" class="popUpLbl"
				style="margin-top: 16px; font-size: 25px !important; color: #a61735; padding-top: 9px;"></label>
			</li>
			<li class="popUpLi2" id="clamCam"
				onclick="getSavedDoc(navigator.camera.PictureSourceType.CAMERA);">
				<label id="capture" class="popUpLbl"
				style="margin-top: 16px; font-size: 25px !important; color: #a61735; padding-top: 9px;"></label>
			</li>
		</ul>
	</div>

	<input type="hidden" name="text" id="txtHdnRefNo">
	<input type="hidden" name="text" id="txtHdnCustCode">
	<input type="hidden" name="text" id="txtHdnTransId">
	<input type="hidden" name="text" id="txtHdnPrvdrCode">
	<input type="hidden" name="text" id="txtHdnPrvdrName">
	<input type="hidden" name="text" id="txtHdnPrvdrFax">
	<input type="hidden" name="text" id="txtHdnPrvdrPhone">
	<input type="hidden" name="text" id="txtHdnPrvdrAddrs01">
	<input type="hidden" name="text" id="txtHdnPrvdrAddrs02">
	<input type="hidden" name="text" id="txtHdnPrvdrAddrs03">
	<input type="hidden" name="text" id="txtHdnPrvdrLng">
	<input type="hidden" name="text" id="txtHdnPrvdrLat">
	
	

	<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/chat.js"></script>
	<script src="js/pushnotification.js"></script>
	 <script src="js/mediRem.js"></script> 

</body>
</html>

/*Login.js*/

$(".js-example-responsive").select2({
		placeholder: "Select a state",
		language: "es",
		 theme: "classic"
});

<!---Login.html--->

<select class="js-example-responsive" style="width: 50%">
	<option value="AL">Alabama</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="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>

<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="KY">Kentucky</option>
	<option value="LA">Louisiana</option>
	<option value="ME">Maine</option>
	<option value="MD">Maryland</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>
					
<select class="js-example-responsive" style="width: 50%">
	<option value="LA">Louisiana</option>
	<option value="ME">Maine</option>
	<option value="MD">Maryland</option>
	<option value="MA">Massachusetts</option>
</select>

示例项目代码

查询移动1.4.0应用程序select2插件无法正常工作如何解决

0 个答案: