javascript - jquery Select2 函数中的搜索功能不起作用?
问题描述
代码按预期运行,但 select2 函数不起作用。不要得到任何错误或任何东西,只是搜索选项不存在
<?php
require 'dbConfig.php';
?>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>[enter image description here][1]
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="JtLogo.ico" sizes="32x32">
<link rel="icon" type="image/png" href="JtLogo.ico" sizes="16x16">
<link rel="manifest" href="manifest.json">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#d9230f">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,700">
<link rel="stylesheet" href="css/vendor.min.css">
<link rel="stylesheet" href="css/elephant.min.css">
<link rel="stylesheet" href="css/application.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.blockUI.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
</style>
</head>
<body style="padding: 0%;">
<div style="position: fixed; width: 100%; background-color: white; padding: 4px;"><div class="row gutter-xs" style="background-color: #029ACF;">
<div style="text-align: center; line-height: 30px;"><font style="color: #FFF;">SAMPLE TRACK (KOLKATA)</font></div>
</div>
<div class="row gutter-xs" style="margin-top: 5px;">
<button type="button" class="btn btn-info btn-xs" style="margin-left: 5px;" onclick="window.location='home.php';">HOME</button>
<button type="button" class="btn btn-default btn-xs" style="margin-right: 5px; float: right;" id="logout" onclick="window.location='logout.php';"><span class="icon icon-sign-out" style="line-height: 18px;"></span></button>
<button type="button" class="btn btn-default btn-xs" style="margin-right: 0px; float: right;" disabled="">
LOGOUT
</button>
</div>
<br>
<div class="row gutter-xs">
<div class="col-xs-6 col-md-2">
<select class="custom-select custom-select-sm" name="cbosale" id="cbosale" required>
<option value="">Select Sale</option>
<?php
echo $sql1 = "SELECT Query";
$res1 = mysqli_query($db,$sql1);
$i1 = 0;
while($r1 = mysqli_fetch_array($res1))
{
?>
<option value="<?php echo $r1[0]; ?>"><?php echo $r1[0]; ?>/<?php echo $r1[1]; ?></option>
<?php $i1++; } ?>
</select>
</div>
<div class="col-xs-6 col-md-2">
<select class="custom-select custom-select-sm" name="cbogarden" id="cbogarden">
<option value="">Select Garden</option>
<?php
echo $sql1 = "SELECT Query";
$res1 = mysqli_query($db,$sql1);
$i1 = 0;
while($r1 = mysqli_fetch_array($res1))
{
?>
<option value="<?php echo $r1[0]; ?>"><?php echo $r1[0]; ?></option>
<?php $i1++; } ?>
</select>
</div>
</div>
<br>
<div class="row gutter-xs">
<div class="col-xs-6 col-md-2">
<select class="custom-select custom-select-sm" name="cbocat" id="cbocat" required>
<option value="">Select Category</option>
<?php
$sql = "SELECT Query";
$res = mysqli_query($db,$sql);
$i = 0;
while($r = mysqli_fetch_array($res))
{
?>
<option value="<?php echo $r[0]; ?>"><?php echo $r[0]; ?></option>
<?php $i++; } ?>
</select>
</div>
<div class="col-xs-6 col-md-2">
<div id="showgrade">
<select class="custom-select custom-select-sm" name="cbograde" id="cbograde">
<option value="">Select Grade</option>
<?php
$sql = "SELECT Query"; //GradeCode CategoryCode GardenCode
$res = mysqli_query($db,$sql);
$i = 0;
while($r = mysqli_fetch_array($res))
{
?>
<option value="<?php echo $r[0]; ?>"><?php echo $r[0]; ?></option>
<?php $i++; } ?>
</select>
</div>
</div>
</div>
<br/>
<div class="row gutter-xs">
<div class="col-xs-12 col-md-4">
<button type="button" class="btn btn-primary" id="filter">SHOW</button>
</div>
</div>
<br/>
<div class="row gutter-xs">
<div class="col-xs-12 col-md-4">
<a class="btn btn-primary float-right" href="cmail.php">E-Mail Selected DATA</a>
<a class="btn btn-primary float-right" href="catalogue_save_exl.php">Download SELECTION</a>
</div>
</div>
</div>
<br/><br/><br/><br/><br/><br/>
<div class="row gutter-xs" style="margin-top: 155px; padding: 4px;">
<div id="showdata">
<div id="postList">
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#filter').click(function(){
var sale = $('#cbosale').val();
var cat = $('#cbocat').val();
var grade = $('#cbograde').val();
var garden = $('#cbogarden').val();
$.ajax({
type: 'POST',
url: 'catalogue_data.php',
data: 'sale='+sale+'&cat='+cat+'&grade='+grade+'&garden='+garden,
success: function(html){
$('#postList').html(html);
}
});
});
});
$(document).ready(function(){
$('#cbocat').change(function(){
var ttype = $('#cbocat').val();
$.ajax({
type: 'POST',
url: 'get_grade.php',
data: 'ttype='+ttype,
success: function(html){
$('#showgrade').html(html);
}
});
});
});
$(document).ready(function () {
$("select").select2();
});
</script>
</div>
</div>
</body>
</html>
请检查以下链接以查看输出。
如果网站正在运行并且没有问题,则主要功能是 select2 功能不起作用
解决方案
试试这个代码:
<?php
require 'dbConfig.php';
?>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=" width=device-width,initial-scale=1,user-scalable=no">
<meta name="theme-color" content="#ffffff">
<title></title>[enter image description here][1]
<!-- Icons -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="JtLogo.ico" sizes="32x32">
<link rel="icon" type="image/png" href="JtLogo.ico" sizes="16x16">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#d9230f">
<!-- Manifest -->
<!-- <link rel="manifest" href="manifest.json"> -->
<!-- CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,700">
<link rel="stylesheet" href="css/vendor.min.css">
<link rel="stylesheet" href="css/elephant.min.css">
<link rel="stylesheet" href="css/application.min.css">
<!-- BootStrap & Select2 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" />
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- jQuery Mobile -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<!-- Bootstrap & Select2 JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>
<!-- Script -->
<script type="text/javascript" src="js/jquery.blockUI.js"></script>
</head>
<body style="padding: 0%;">
<div style="position: fixed; width: 100%; background-color: white; padding: 4px;">
<div class="row gutter-xs" style="background-color: #029ACF;">
<div style="text-align: center; line-height: 30px;">
<font style="color: #FFF;">SAMPLE TRACK (KOLKATA)</font>
</div>
</div>
<div class="row gutter-xs" style="margin-top: 5px;">
<button type="button" class="btn btn-info btn-xs" style="margin-left: 5px;" onclick="window.location='home.php';">
HOME
</button>
<button type="button" class="btn btn-default btn-xs" style="margin-right: 5px; float: right;" id="logout" onclick="window.location='logout.php';">
<span class="icon icon-sign-out" style="line-height: 18px;"></span>
</button>
<button type="button" class="btn btn-default btn-xs" style="margin-right: 0px; float: right;" disabled="">
LOGOUT
</button>
</div>
<br>
<div class="row gutter-xs">
<div class="col-xs-6 col-md-2">
<select class="custom-select custom-select-sm" name="cbosale" id="cbosale" required>
<option value="">Select Sale</option>
<?php
echo $sql1 = "SELECT Query";
$res1 = mysqli_query($db,$sql1);
$i1 = 0;
while($r1 = mysqli_fetch_array($res1)){
?>
<option value="<?php echo $r1[0]; ?>"><?php echo $r1[0]; ?>/<?php echo $r1[1]; ?></option>
<?php $i1++; } ?>
</select>
</div>
<div class="col-xs-6 col-md-2">
<select class="custom-select custom-select-sm" name="cbogarden" id="cbogarden">
<option value="">Select Garden</option>
<?php
echo $sql1 = "SELECT Query";
$res1 = mysqli_query($db,$sql1);
$i1 = 0;
while($r1 = mysqli_fetch_array($res1))
{
?>
<option value="<?php echo $r1[0]; ?>"><?php echo $r1[0]; ?></option>
<?php $i1++; } ?>
</select>
</div>
</div>
<br>
<div class="row gutter-xs">
<div class="col-xs-6 col-md-2">
<select class="custom-select custom-select-sm" name="cbocat" id="cbocat" required>
<option value="">Select Category</option>
<?php
$sql = "SELECT Query";
$res = mysqli_query($db,$sql);
$i = 0;
while($r = mysqli_fetch_array($res))
{
?>
<option value="<?php echo $r[0]; ?>"><?php echo $r[0]; ?></option>
<?php $i++; } ?>
</select>
</div>
<div class="col-xs-6 col-md-2">
<div id="showgrade">
<select class="custom-select custom-select-sm" name="cbograde" id="cbograde">
<option value="">Select Grade</option>
<?php
$sql = "SELECT Query"; //GradeCode CategoryCode GardenCode
$res = mysqli_query($db,$sql);
$i = 0;
while($r = mysqli_fetch_array($res))
{
?>
<option value="<?php echo $r[0]; ?>"><?php echo $r[0]; ?></option>
<?php $i++; } ?>
</select>
</div>
</div>
</div>
<br/>
<div class="row gutter-xs">
<div class="col-xs-12 col-md-4">
<button type="button" class="btn btn-primary" id="filter">SHOW</button>
</div>
</div>
<br/>
<div class="row gutter-xs">
<div class="col-xs-12 col-md-4">
<a class="btn btn-primary float-right" href="cmail.php">E-Mail Selected DATA</a>
<a class="btn btn-primary float-right" href="catalogue_save_exl.php">Download SELECTION</a>
</div>
</div>
</div>
<br/><br/><br/><br/><br/><br/>
<div class="row gutter-xs" style="margin-top: 155px; padding: 4px;">
<div id="showdata">
<div id="postList">
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#filter').click(function(){
var sale = $('#cbosale').val();
var cat = $('#cbocat').val();
var grade = $('#cbograde').val();
var garden = $('#cbogarden').val();
$.ajax({
type: 'POST',
url: 'catalogue_data.php',
data: 'sale='+sale+'&cat='+cat+'&grade='+grade+'&garden='+garden,
success: function(html){
$('#postList').html(html);
}
});
});
});
$(document).ready(function(){
$('#cbocat').change(function(){
var ttype = $('#cbocat').val();
$.ajax({
type: 'POST',
url: 'get_grade.php',
data: 'ttype='+ttype,
success: function(html){
$('#showgrade').html(html);
}
});
});
});
$(document).ready(function () {
$("select").select2();
});
</script>
</div>
</div>
</body>
</html>
推荐阅读
- javascript - 如何从 div 内的所有元素中删除特定属性?
- shopify - 如何在shopify中查找已售产品的总数?
- sql-server - 在 SQL Server Management Studio 中添加表时出错
- php - 我如何在一段时间内迭代我的数据库数据,因为我需要从多个表中获取它
- javascript - 对具有相同类的多个选择应用更改功能
- html - 无法为标签内的标签设置 ID 值
- automated-tests - 无法在无头 chrome 中运行我的 CodeceptJS 测试用例
- c# - C#:Debug.Assert() 条件复杂
- regex - 匹配任何至少偏离给定字符串一个字符的字符串
- javascript - 如何使用jQuery在按下按钮时在textarea中向上、向下、向左、向右移动光标?