When i include multiselect.js file in my code it is going to disable my checkbox in my 3rd dropdown and if i removed it then it enable the dropdown working as multiselect choice but it will not perform multiselect on two side in next level because there is no list to display.so what should i do in my multiselect.js file so it will work fine.
if i add multiselct.js file then
if i remove multiselect.js file then it shows checkbox in 3rd dropdown but it shows nothing in quarters list
my code is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="cssfile/innerStyle.css"/>
<script type="text/javascript" src="http://ift.tt/1fEahZI"></script>
<link href="http://ift.tt/1L4JlTu"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ift.tt/1L4Jne4"></script>
<link href="http://ift.tt/1EzpWpf"
rel="stylesheet" type="text/css" />
<script src="http://ift.tt/1EzpXJJ"
type="text/javascript"></script>
<script src="jsfile/multiselect.min.js"></script>
</head>
<body>
<div id="header">
<font color="white" class="f1"><h1 align="center">QAMS</h1></font>
<hr/>
</div>
<center>
<div id="navbar">
<?php
require 'unavbar.php';
?>
</div>
</center>
<div id="container1">
<br>
<form onsubmit="return checkForm()" action="RqstQtr6.php" name="rqform" method="post">
<center>
<table border="1" cellpadding="10" cellspacing="9" width="60%" style="margin-top:90px">
<tr>
<td colspan="1">Types</td>
<td colspan="1">
<select name="type" id="type" class="styled-select green rounded">
<option value="">--------Select--------</option>
<?php
foreach($result1 as $type)
{
?>
<option value="<?php echo $type['typeId']?>"><?php echo $type['quarterType']?></option>
<?php
}
?>
</select>
</td>
<td colspan="1">Location</td>
<td colspan="1">
<select name="loc" id="loc" class="styled-select green rounded">
<option value="">--------Select--------</option>
</select>
</td>
<td colspan="1">Blocks:</td>
<td colspan="1">
<select name="block[]" id="block" class="form-control" multiple="multiple">
</select>
</td>
</tr>
</table>
<table border="1" cellpadding="10" cellspacing="9" width="60%">
<tr>
<td colspan="1">Quarters:<br/><font size="0.9pt" color="blue">*Location/Block/Floor/QuarterNo</font></td>
<td colspan="1">
<div>
<select name="Flr[]" id="Flr" class="form-control" size="13" multiple="multiple">
</select>
</div>
</td>
<td colspan="2">
<div>
<button type="button" id="Flr_undo" class="btn btn-primary btn-block">undo</button>
<button type="button" id="Flr_rightAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-forward"></i></button>
<button type="button" id="Flr_rightSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
<button type="button" id="Flr_leftSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
<button type="button" id="Flr_leftAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-backward"></i></button>
<button type="button" id="Flr_redo" class="btn btn-warning btn-block">redo</button>
</div>
</td>
<td colspan="2">
<div>
<select name="to[]" id="Flr_to" class="form-control" size="13" multiple="multiple"></select>
</div>
</td>
</tr>
<tr>
<td colspan="6" align="center">
<input type="submit" name="Submit" value="Submit Selection"/>
</td>
</tr>
</table>
</center>
</form>
<?php
require 'scrollback.php';
?>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$('#type').on('change',function(){
$('#loc').val('');
$('#block').val('');
var stateID = $(this).val();
//alert(stateID);
if(stateID){
$.ajax({
type:'POST',
url:'FetchtypeN.php',
data:'state_id='+stateID,
success:function(html){
$('#loc').html(html);
}
});
}
});
$('#loc').on('change',function(){
$('#block').val('');
var countryID = $(this).val();
var typeID = $('#type').val();
//alert(typeID);
//alert(countryID);
if(countryID){
$.ajax({
type:'POST',
url:'FetchtypeN.php',
data:'country_id='+countryID + '&type_id=' + typeID,
success:function(html){
$('#block').html('');
$('#block').multiselect('destroy');
$('#block').html(html);
$('#block').multiselect('refresh');
$('#block').multiselect();
}
});
}
});
$('#block').on('change',function(){
var stateID = $(this).val();
var typeID = $('#type').val();
alert(stateID);
if(stateID){
$.ajax({
type:'POST',
url:'FetchtypeN.php',
data:'state_id='+stateID+ '&typeID=' + typeID,
success:function(html){
//$('#Flr').html('');
// $('#Flr').multiselect('destroy');
$('#Flr').html(html);
//$('#Flr').multiselect('checked', true);
//$('#Flr').multiselect('refresh');
//$('#Flr').multiselect();
}
});
}
});
});
</script>
<script type="text/javascript">
$(function () {
$('#block').multiselect({
includeSelectAllOption: true
});
});
</script>
<script type="text/javascript">
function checkForm() {
if((document.getElementById("loc")).selectedIndex == 0)
{
alert('Select Location!!');
return false;
}
else if((document.getElementById("type")).selectedIndex == 0)
{
alert('Select Type also!!');
return false;
}
else if((document.getElementById("block")).selectedIndex == 0)
{
alert('Select Block also!!');
return false;
}
else if($('input[type=checkbox]:checked').length==0)
{
alert('You do not select any Quarters !!');
return false;
}
}
</script>
<script type="text/javascript">
$(function() {
$('#Flr').multiselect();
});
</script>
Hope you guys understood what i want.thanks in advance.
Aucun commentaire:
Enregistrer un commentaire