Есть такой список:
<ul>
<li><a href="">Телефоны</a>
<ul>
<li><a href="">Apple</a>
<ul>
<li><a href="">iPhone 4</a></li>
<li><a href="">iPhone 5</a></li>
</ul>
</li>
<li><a href="">Samsung</a>
<ul>
<li><a href="">Samsung A3</a></li>
<li><a href="">Samsung A5</a></li>
</ul>
</li>
<li><a href="">Sony</a>
<ul>
<li><a href="">Sony Xperia XA1</a></li>
<li><a href="">Sony Xperia XA2</a></li>
<li><a href="">Sony Xperia XA3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Планшеты</a>
<ul>
<li><a href="">Apple</a>
<ul>
<li><a href="">iPad</a></li>
<li><a href="">iPad 2</a></li>
</ul>
</li>
<li><a href="">Samsung</a>
<ul>
<li><a href="">Samsung Tab 2</a></li>
<li><a href="">Samsung Tab 3</a></li>
<li><a href="">Samsung Tab 4</a></li>
</ul>
</li>
<li><a href="">LG</a>
<ul>
<li><a href="">LG v490</a></li>
<li><a href="">LG v500</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Как этот список преобразовать в 3 пошаговых select(-а)? Т.е. сначала выбираем "Тип устройства", потом для этого типа устройства выбираем производителя, потом для этого производителя выбираем модель. Получается 3 select(-a):
Тип устройства
Производитель
Модель
После выбора последнего select нас должно перекидывать на выбранную страницу. Как это можно сделать с помощью JQuery или JS? Может кто-то решал уже такие задачи? Заранее благодарю за помощь.
это можно делать с ajax надо подключить jquery v index.php
original link Dynamic Dependent Select Box using jQuery, Ajax and PHP LisenMe
демо здесь demo
index.php ↓
<script type="text/javascript">
$(document).ready(function(){
$('#country').on('change',function(){
var countryID = $(this).val();
if(countryID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'country_id='+countryID,
success:function(html){
$('#state').html(html);
$('#city').html('<option value="">Select state first</option>');
}
});
}else{
$('#state').html('<option value="">Select country first</option>');
$('#city').html('<option value="">Select state first</option>');
}
});
$('#state').on('change',function(){
var stateID = $(this).val();
if(stateID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'state_id='+stateID,
success:function(html){
$('#city').html(html);
}
});
}else{
$('#city').html('<option value="">Select state first</option>');
}
});
});
</script>
<?php
//Include database configuration file
include('dbConfig.php');
//Get all country data
$query = $db->query("SELECT * FROM countries WHERE status = 1 ORDER BY country_name ASC");
//Count total number of rows
$rowCount = $query->num_rows;
?>
<select name="country" id="country" >
<option value="">Select Country</option>
<?php
if($rowCount > 0){
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['country_id'].'">'.$row['country_name'].'</option>';
}
}else{
echo '<option value="">Country not available</option>';
}
?>
</select>
<select name="state" id="state">
<option value="">Select country first</option>
</select>
<select name="city" id="city">
<option value="">Select state first</option>
</select>
ajaxData.php ↓
<?php
//Include database configuration file
include('dbConfig.php');
if(isset($_POST["country_id"]) && !empty($_POST["country_id"])){
//Get all state data
$query = $db->query("SELECT * FROM states WHERE country_id = ".$_POST['country_id']." AND status = 1 ORDER BY state_name ASC");
//Count total number of rows
$rowCount = $query->num_rows;
//Display states list
if($rowCount > 0){
echo '<option value="">Select state</option>';
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['state_id'].'">'.$row['state_name'].'</option>';
}
}else{
echo '<option value="">State not available</option>';
}
}
if(isset($_POST["state_id"]) && !empty($_POST["state_id"])){
//Get all city data
$query = $db->query("SELECT * FROM cities WHERE state_id = ".$_POST['state_id']." AND status = 1 ORDER BY city_name ASC");
//Count total number of rows
$rowCount = $query->num_rows;
//Display cities list
if($rowCount > 0){
echo '<option value="">Select city</option>';
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['city_id'].'">'.$row['city_name'].'</option>';
}
}else{
echo '<option value="">City not available</option>';
}
}
?>
dbConfig.php ↓
<?php
//db details
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'lisenme';
//Connect and select the database
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
if ($db->connect_error) {
die("Connection failed: " . $db->connect_error);
}
?>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Есть такой плагин, называется TypeItЯ хочу сделать меню на сайте, с эффектом печатающегося текста
Как закрывать меню Bootstrap при нажатии на любой пункт меню в мобильной версии?