jquery Select2 功能中的搜索功能不起作用？
[英]search feature in jquery Select2 function is not working?
问题描述
the code is running as intended but the select2 function is not working.
代码按预期运行，但 select2 函数不起作用。 Don't get any error or anything just the search option is not there不要出现任何错误或任何只是搜索选项不存在的东西
<?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>
please check the below link to see the output.请检查以下链接以查看输出。
The main functionality if the website is working and has no issues, it's just the select2 function this is not working如果网站正常工作并且没有问题，则主要功能，这只是 select2 功能不起作用
1 个解决方案
解决方案1
0 已采纳 2020-08-26 05:25:52
Try out this code:试试这个代码：
<?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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
jQuery select2 AJAX无法正常工作 - jQuery select2 AJAX not working
Select2 4.0 JSON搜索不起作用 - Select2 4.0 JSON search not working
select2 搜索框下拉菜单不起作用 - select2 search box dropdown not working
Select2 默认搜索框不起作用 - Select2 default search box not working
Select2 搜索输入在 bootstrap5 上不起作用 - Select2 search input not working on bootstrap5
使用 jQuery 或 Javascript 将提示功能添加到 select2 下拉列表？ - Add tootip feature to select2 dropdown using jQuery or Javascript?
jQuery文件上传不适用于Select2 - Jquery file upload not working with Select2
ajax后不再工作的jQuery select2 - jquery select2 after ajax not working anymore
使用 jQuery Validate 和 Select2 进行验证不起作用 - Using jQuery Validate with Select2 for validation not working
select2 需要 false jquery 不工作 - select2 required false jquery not working
相关标签