I am trying to put a chained select on my form but i cannot just do it in bootstrap, and im wondering if my code is wrong or not, i am following the code in this site http://www.appelsiini.net/projects/chained
and tried to put it in my code, its yet on proper form but here:
<!DOCTYPE html>
<?php
include('connect.php');
include('session.php');
error_reporting(E_ALL);
?>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Autocomplete</title>
<meta name="viewport" content='width=700' content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script src="jquery.chained.min.js"></script>
<!-- datepicker -->
<link href="dp/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="dp/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
<!-- bootstrap 3.0.2 -->
<link href="../../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="text.css.scss" rel="stylesheet" type="text/css" />
<link href="../../css/bootstrap.min.js" rel="stylesheet" type="text/css" />
<!-- font Awesome -->
<link href="../../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="../../css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- DATA TABLES -->
<link href="../../css/datatables/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="../../css/AdminLTE.css" rel="stylesheet" type="text/css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/typeahead.js"></script>
<style type='text/css'>
/* regular css */
.tabs {
padding: 10px 2em
}
@media screen and (max-width: 500px) {
/* applies only if the screen is narrower than 500px */
.tabs {
padding: 3px 1em
}
}
input, textarea {
max-width:100%
}
WebFont.load({
google: {
families: ['Open Sans']
}
});
.header {
font-family: Arial
}
.wf-opensans-n4-active .header {
font-family: 'Open Sans'
}
</style>
</head>
<body class="skin-blue">
<select id="branch" name="branch">
<option>
<?php
$sql1=mysql_query("SELECT * from branch")or die(mysql_error);
while($row = mysql_fetch_array($sql1)){
echo "<option value=".$row["branch_id"]." class=".$row["branch_id"].">" .$row["branch_name"]. "</option>";
}
?>
</option>
</select>
<select id="service" name="service">
<option>
<?php
$sql1=mysql_query("SELECT * from service")or die(mysql_error);
while($row = mysql_fetch_array($sql1)){
echo "<option value=".$row["service_id"]." class=".$row["branch_id"].">" .$row["service_name"]. "</option>";
}
?>
</option>
</select>
<script>
$("#service").chained("#branch"); /* or $("#series").chainedTo("#mark"); */
</script>
I put it on the top to see if its functioning but it's not?
The working code is here, no bootstrap just plain HTML,
<html>
<head>
<?php include('connect.php'); ?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script src="jquery.chained.min.js"></script>
</head>
<body>
<select id="branch" name="branch">
<option>
<?php
$sql1=mysql_query("SELECT * from branch")or die(mysql_error);
while($row = mysql_fetch_array($sql1)){
echo "<option value=".$row["branch_id"]." class=".$row["branch_id"].">" .$row["branch_name"]. "</option>";
}
?>
</option>
</select>
<select id="service" name="service">
<option>
<?php
$sql1=mysql_query("SELECT * from service")or die(mysql_error);
while($row = mysql_fetch_array($sql1)){
echo "<option value=".$row["service_id"]." class=".$row["branch_id"].">" .$row["service_name"]. "</option>";
}
?>
</option>
</select>
<script>
$("#service").chained("#branch"); /* or $("#series").chainedTo("#mark"); */
</script>
</body>
</html>
I've searched every chained select but I just cant make it work
