Bootstrap select search is not working.May be there is small thing i am missing.
I have using bootstrap select which is working fine.Select options coming from database.added data-live-search="true" for search which is not working.Select dropdown not opening.
Code is
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<?php $sql = "select * from vehicle order by vehiclename";
$vehicle_list = $mysqli->query($sql);
$schematron_array['Level5'] == coming from different table ?>
<label>Vehicle</label>
<select class="selectpicker form-control" data-live-search="true" name="vehicle">
<option value="">Select vehicle</option>
<?php while( $row = $vehicle_list->fetch_array() ) {
if(!empty($row['vehiclename'])) {?>
<option value="<?php echo $row['vehiclename']; ?>" <?php echo ($schematron_array['Level5'] == $row['vehiclename'])?"selected":""; ?> >
<?php echo $row['vehiclename']; ?>
</option>
<?php } } ?>
</select>
Thanks.
Please Forgive if any mistake is there.
There can be two issues -
1. jQuery is missing.
2. Database not returning any rows.
I used your code, applied jQuery and supplied some hard-coded values and it is working fine.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<label>Vehicle</label>
<select class="selectpicker form-control" data-live-search="true" name="vehicle">
<option value="">Select vehicle</option>
<option value="">Vehicle 1</option>
<option value="">Vehicle 2</option>
<option value="">Vehicle 3</option>
<option value="">Vehicle 4</option>
<option value="">Vehicle 5</option>
</select>
Related
This is the code I use to display data from database and filter "Provider " categories with "searchByProvider". Under Provider there is a lot of data, but I want to show only 2 random data that show when someone selected "Provider"?
your text
<!doctype html>
<html>
<head>
<title>document</title>
<!-- Datatable CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.13.1/datatables.min.css"/>
<link href='DataTables/custom.css' rel='stylesheet' type='text/css'>
<!-- jQuery Library -->
<script src="jquery-3.3.1.min.js"></script>
<!-- Datatable JS -->
<script src="DataTables/datatables.min.js"></script>
</head>
<body >
<div >
<!-- Custom Filter -->
<table>
<tr>
<td>
<select id='searchByBrand'>
<option value=''>-- Select Brand--</option>
<option value='Coolcasino'>Coolcasino</option>
<option value='Schnellwetten'>Schnellwetten</option>
<option value='Lightning'>Lightning</option>
<option value='Happyslots'>Happyslots</option>
<option value='Payoutz'>Payoutz</option>
<option value='Instawin'>Instawin</option>
<option value='Quickbet'>Quickbet</option>
</select>
</td>
<td>
<select id='searchByProvider'>
<option value=''>-- Select Provider--</option>
<option value='4ThePlayer'>4ThePlayer</option>
<option value='Bad Dingo'>Bad Dingo</option>
<option value='Big Time Gaming'>Big Time Gaming</option>
<option value='Boomerang'>Boomerang</option>
<option value='Booming Games'>Booming Games</option>
<option value='Dicelab'>Dicelab</option>
<option value='Electric Elephant'>Electric Elephant</option>
<option value='Evoplay'>Evoplay</option>
<option value='Fantasma'>Fantasma</option>
<option value=''>Games Lab</option>
<option value=''>High Flyer Games</option>
<option value=''>Inspired</option>
<option value=''>Isoftbet</option>
<option value=''>Jelly</option>
<option value=''>Just For The Win</option>
<option value=''>Kalamba</option>
<option value=''>Max Win Gaming</option>
<option value=''>Microgaming</option>
<option value=''>Netent</option>
<option value=''>NoLimit City</option>
<option value=''>Northernlights</option>
<option value=''>Peter and Sons</option>
<option value=''>PG Soft</option>
<option value='Play N Go'>Play N Go</option>
<option value=''>Pragmatic Play</option>
<option value=''>Print Studios</option>
<option value='Quickspin'>Quickspin</option>
<option value='Red Tiger'>Red Tiger</option>
<option value='Reflex Gaming'>Reflex Gaming</option>
<option value='Relax'>Relax</option>
<option value='Relax Gaming'>Relax Gaming</option>
<option value='Silverback'>Silverback</option>
<option value='Slingo'>Slingo</option>
<option value='Spearhead'>Spearhead</option>
<option value='STHLM Gaming'>STHLM Gaming</option>
<option value='Yggdrasil'>Yggdrasil </option>
</select>
</td>
</tr>
</table>
<!-- Table -->
<table id='empTable' class='display dataTable'>
<thead>
<tr>
<th>Brand</th>
<th>Provider</th>
<th>Product</th>
<th>URL</th>
</tr>
</thead>
</table>
</div>
<!-- Script -->
<script>
$(document).ready(function(){
var dataTable = $('#empTable').DataTable({
'processing': true,
'pageLength': 10,
'serverSide': true,
'serverMethod': 'post',
//'searching': false, // Remove default Search Control
'ajax': {
'url':'ajaxfile.php',
'data': function(data){
// Read values
var Provider = $('#searchByProvider').val();
var Brand = $('#searchByBrand').val();
// Append to data
data.searchByProvider = Provider;
data.searchByBrand = Brand;
}
},
'columns': [
{ data: 'Brand' },
{ data: 'Provider' },
{ data: 'Product'},
{ data: 'URL', render:function (dataField) { return '<a target="_blank" href="' + dataField + '">Game Link</a>'; } },
]
});
$('#searchByBrand').change(function(){
dataTable.draw();
});
$('#searchByProvider').change(function(){
dataTable.draw();
});
});
</script>
</body>
</html>
in the talbe 4 column(Brand,Provider,Product,Url) Brand and Provider show as filter. I want to show when someone filter with Brand with show only 2 random data from Provider and also want to show always randomly
Is this possible?
Please help me.
Thanks a lot!
Simply add order by rand() limit 2 to retrieve 2 random records from the db table
For example, if the select query (in your ajaxfile.php) is like
select [fields...] from [tablename] where [conditions]
then change to
select [fields...] from [tablename] where [conditions] order by rand() limit 2
I am creating HTML/PHP form, in which I want to make two dropdown lists.
First one should be visible all the time, and depending on what is selected in it, a second one should be revealed.
I have tried the code below to see if that works, but for some reason server is showing me #500 Error. Tried to Google it but usually find some Java codes, and I am not too familiar with it unfortunately.
form.php
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv='Content-Type' CONTENT='text/html; charset=utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name='GENERATOR'>
<meta name='ProgId'>
<SCRIPT>
function makevisible(cur,which){
if (which==0)
cur.filters.alpha.opacity=100
else
cur.filters.alpha.opacity=50
}
</SCRIPT>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class='form-item message-error' style='display: inline-block;' data-tooltip='Option'>
<select size='1' id='selectornr01' class='form-text'>
<option value='0' selected>Choose Option</option>
<option value='1'>Option One</option>
<option value='2'>Option Two</option>
</select>
</div>
<div class='form-item message-error' style='display: inline-block;' data-tooltip='SubOption'>
<select size='1' id='sub1' class='form-text'>
<?php
if ($selectornr01 == 0) {
echo 'Choose Option' ;
}
elseif ($selectornr01 == 1) {
include('01_file.html') ;
}
else ($selectornr01 == 2) {
include('02_file.html') ;
}
?>
</select>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>
01_file.html
<option value='' selected>Choose Sub Option</option>
<option value='subOption1'>Sub Option One</option>
<option value='subOption2'>Sub Option Two</option>
<option value='subOption3'>Sub Option Three</option>
02_file.html
<option value='' selected>Choose Sub Option</option>
<option value='diffOption1'>Different Option One</option>
<option value='diffOption2'>Different Option Two</option>
<option value='diffOption3'>Different Option Three</option>
So basically the point is when you select an option in first dropdown list - selectornr01 - in second div bunch of options should show up.
To give you an idea what you can do using javascript (jQuery):
Add an event listener to the first dropdown and show/hide the secondary dropdowns depending of the selected value.
$('#selectornr01').on('change', function() {
val = parseInt($(this).val());
$('.sub').hide();
if (val === 1) {
$('#sub1').show();
} else if (val === 2) {
$('#sub2').show();
}
});
//Or in plain JS
var selection = document.getElementById("selectornr01");
selection.addEventListener("change", function() {
var val = parseInt(selection.value);
[].forEach.call(document.getElementsByClassName('sub'), function(el) {
el.style.display = 'none';
});
if (val === 1) {
document.getElementById("sub1").style.display = "block";
} else if (val === 2) {
document.getElementById("sub2").style.display = "block";
}
});
.sub {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class='form-item message-error' style='display: inline-block;' data-tooltip='Option'>
<select size='1' id='selectornr01' class='form-text'>
<option value='0' selected>Choose Option</option>
<option value='1'>Option One</option>
<option value='2'>Option Two</option>
</select>
</div>
<div class='form-item message-error' style='display: inline-block;' data-tooltip='SubOption'>
<select size='1' id='sub1' class='form-text sub'>
<option value='' selected>Choose Sub Option</option>
<option value='subOption1'>Sub Option One</option>
<option value='subOption2'>Sub Option Two</option>
<option value='subOption3'>Sub Option Three</option>
</select>
<select size='1' id='sub2' class='form-text sub'>
<option value='' selected>Choose Sub Option</option>
<option value='diffOption1'>Different Option One</option>
<option value='diffOption2'>Different Option Two</option>
<option value='diffOption3'>Different Option Three</option>
</select>
</div>
I am trying to put countries flag infront of there respective country code likein gmail registration something like this:
I tried with img src and background but images are not visible.I have a table in mysql with ISO,country name,code. I am trying to use https://ipdata.co/flags api to populate flag.
My code:
<select Emp Name='NEW'>
<option value="">--- Select ---</option>
<?
$list=mysqli_query($con,"select * from country");
while($row_list=mysqli_fetch_assoc($list)){
$display="+".$row_list['phonecode']."-".$row_list['name'];
$flag=$row_list['isosmall'];
?>
<option style="background-image:url(https://ipdata.co/flags/<?php echo $flag;?>.png);"></option>
// <option value="<img src="https://ipdata.co/flags/<?php echo $flag;?>.png"/></option>
// <? echo $display; ?>"</option><? if($row_list['iso']==$select){ echo "selected"; } ?>
// <?//echo $row_list['name'];
//echo $display;?>
</option>
<?
}
?>
</select>
You can do it with this jquery plugin and replace with your data:
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.min.js"></script>
</head>
<body>
<select class="country" name="wcpbc-manual-country" id="country">
<option value="AU" data-iconurl="https://aus.merchnow.com/img/location-aus.png">AU some text</option>
<option value="IN" data-iconurl="https://images0.voylla.com/flags/inr.gif">IN some text</option>
</select>
</body>
</html>
JS:
$("#country").selectBoxIt();
JSFiddle example
I would like to know how you could add a help symbol beside a disabled option in a dropdown in html, if possible. I would like it so that when you click on the symbol it then tells you why that option has been disabled. Something similar to the dropdown below.
This is the basic code I have for the dropdown right now.
<select name="description" rows="4" class="form-control">
<option value="RhinoTab"><?php echo _l('estimate_table_option1_1'); ?></option>
<option value="RTi"><?php echo _l('estimate_table_option1_2'); ?></option>
<option value="Magical Shit" disabled>Magical Shit</option>
</select>
I ended up finding an example I was able to use as a work around to get my project working. Instead of having an icon it is when you click on the "disabled" option but it will do something close enough to what I was looking for.
$(function(){
var options_sel_idx = 0;
$("#options").on("change", this, function(event) {
if($(this.options[this.selectedIndex]).hasClass("disabled")) {
alert("a");
this.selectedIndex = options_sel_idx;
} else {
options_sel_idx = this.selectedIndex;
}
});
});
<style type="text/css">
.disabled {color:#808080;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="options" id="options">
<option value="">Select</option>
<option value="1">Options 1</option>
<option value="0" class="disabled">Options 2</option>
<option value="0" class="disabled">Options 3</option>
<option value="0" class="disabled">Options 4</option>
</select>
What I'm attempting to do with the below code is call a PHP function from an drop-down menu.
Is there a clean way of doing this?
code:
<html>
<head>
</head>
<body>
<?php
function OnSelectionChange() {
echo("OK IT WORKS");
}
?>
<section>
<select onchange="OnSelectionChange()">
<option value='' disabled selected>Assign Driver</option>
<option value='4353'>Steve Jobs</option>
<option value='3333'>Ian Wright</option>
<option value='66666'>Mark James</option>
</select>
</section>
</body>
</html>
You can get the selected value from the drop down list simply using php without using JavaScript.
<html>
<head>
<title>Country</title>
</head>
<body>
<form method="POST" action="">
Select Your Country
<select name="country" onchange="this.form.submit()">
<option value="" disabled selected>--select--</option>
<option value="india">India</option>
<option value="us">Us</option>
<option value="europe">Europe</option>
</select>
</form>
<?php
if(isset($_POST["country"])){
$country=$_POST["country"];
echo "select country is => ".$country;
}
?>
</body>
</html>
simple ajax using jquery
index page
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#myDropDown').change(function(){
//Selected value
var inputValue = $(this).val();
alert("value in js "+inputValue);
//Ajax for calling php function
$.post('submit.php', { dropdownValue: inputValue }, function(data){
alert('ajax completed. Response: '+data);
//do after submission operation in DOM
});
});
});
</script>
</head>
<body>
<select id="myDropDown">
<option value='' disabled selected>Assign Driver</option>
<option value='4353'>Steve Jobs</option>
<option value='3333'>Ian Wright</option>
<option value='66666'>Mark James</option>
</select>
</body>
</html>
in submit.php
<?php
function processDrpdown($selectedVal) {
echo "Selected value in php ".$selectedVal;
}
if ($_POST['dropdownValue']){
//call the function or execute the code
processDrpdown($_POST['dropdownValue']);
}
for simple js ajax use XMLHttpRequest
Does not connect onchange event with php function.
must use javascript function
<script>
function OnSelectionChange()
{
alert("OK IT WORKS");
}
</script>
<html>
<head>
<title>Country</title>
</head>
<body>
<form>
Select Your Country
<select name="country" onchange="this.form.submit()">
<option value="" disabled selected>--select--</option>
<option value="india">India</option>
<option value="us">Us</option>
<option value="europe">Europe</option>
</select>
</form>
<?php
if(isset($_GET["country"])){
$country=$_GET["country"];
echo "select country is => ".$country;
}
?>
</body>
</html>
Can't do that, use JavaScript function instead
<html>
<head>
</head>
<body>
<script>
function OnSelectionChange()
{
alert("OK IT WORKS");
}
</script>
<section>
<select onchange="OnSelectionChange()">
<option value='' disabled selected>Assign Driver</option>
<option value='4353'>Steve Jobs</option>
<option value='3333'>Ian Wright</option>
<option value='66666'>Mark James</option>
</select>
</section>
</body>
</html>
This mild adaptation has worked well for me. So very many thanks to vivekcs0114 and furthermore nicely avoids JS and the required Ajax solution which after around 200 miserable attempts has been a total disaster.
<form method="post" action="">
<select method="post" name="areasel" onchange="this.form.submit()">
<option value="Choose one">Choose one</option>
<option value="Complete Airframe">Complete Airframe</option>
<option value="Armstrong Siddeley">Armstrong Siddeley</option>
<option value="Something">Something</option>
</select>
</form>
<?php
if(isset($_POST["areasel"]))
{
$type=$_POST["areasel"];
echo "<BR>Do some SQL stuff using :".$type;
}
?>