Первое выпадающее меню для автоматического изменения параметров второго выпадающего меню

См. Ниже рабочий пример без использования базы данных .

Рабочий пример с использованием базы данных MySQL

Если вы хотите подключить его с помощью базы данных, да, это, безусловно, возможно. Рассмотрим эту таблицу:

 CREATE TABLE `contents` ( `id` INT PRIMARY KEY AUTO_INCREMENT, `name` VARCHAR (255), `parent` INT DEFAULT 0 ); INSERT INTO `contents` (`name`, `parent`) VALUES ('Names', 0), ('Places', 0), ('Animals', 0), ('Praveen', 1), ('Bill Gates', 1), ('Steve Jobs', 1), ('India', 2), ('New York', 2), ('London', 2), ('Singapore', 2), ('Cat', 3), ('Dog', 3), ('Tiger', 3), ('Deer', 3) 

Структура таблицы

 +----+------------+--------+ | id | name | parent | +----+------------+--------+ | 1 | Names | 0 | | 2 | Places | 0 | | 3 | Animals | 0 | | 4 | Praveen | 1 | | 5 | Bill Gates | 1 | | 6 | Steve Jobs | 1 | | 7 | India | 2 | | 8 | New York | 2 | | 9 | London | 2 | | 10 | Singapore | 2 | | 11 | Cat | 3 | | 12 | Dog | 3 | | 13 | Tiger | 3 | | 14 | Deer | 3 | +----+------------+--------+ 

Начальный код HTML и PHP

Теперь, позвольте использовать PHP, чтобы сначала заполнить начальный <select> :

 <?php mysql_connect(); mysql_select_db("contents"); $result = mysql_query("SELECT * FROM `contents` WHERE `parent` = 0"); while(($data = mysql_fetch_array($result)) !== false) echo '<option value="', $data['id'],'">', $data['name'],'</option>' ?> 

Теперь <select> готов. Благодаря функции onchange мы можем запустить событие AJAX, чтобы получить новый <select> с данными, предоставленными родительским <select> .

 <select onchange="ajaxfunction(this.value)"> <!-- Options would have been initially populated here --> </select> 

Теперь для функции jQuery вы можете сделать так:

 <script type="text/javascript"> function ajaxfunction(parent) { $.ajax({ url: 'process.php?parent=' + parent; success: function(data) { $("#sub").html(data); } }); } </script> 

В HTML после <select> вам нужно указать другой вариант с id как sub .

 <select onchange="ajaxfunction(this.value)"> <!-- Options would have been initially populated here --> </select> <select id="sub"></select> 

Обработка исходного кода PHP

Наконец, исходный код process.php :

 <?php mysql_connect(); mysql_select_db("contents"); $result = mysql_query("SELECT * FROM `contents` WHERE `parent` = " . mysql_real_escape_string($_GET["parent"])); while(($data = mysql_fetch_array($result)) !== false) echo '<option value="', $data['id'],'">', $data['name'],'</option>' ?> 

Рабочий пример без использования базы данных

Вам просто нужно заменить это на PHP.

 <?php $parent = array("Name", "Place", "Animals"); foreach ($parent as $id => $name) echo '<option value="s', $id,'">', $name,'</option>' ?> 

И для process.php :

 <?php $parent = array("Name", "Place", "Animals"); $s0 = array("Praveen", "Bill Gates", "Steve Jobs"); foreach (${$_GET["parent"]} as $id => $name) echo '<option value="', $data['id'],'">', $data['name'],'</option>' ?> 

Часть о базе данных не совсем понятна, так как выборки предположительно будут «перечислены» в некотором роде. Если у вас их в каком-то другом формате, это имеет смысл или если вы спрашиваете, нужен ли обратный вызов в базу данных (обратная postback ), ответ будет отрицательным. Но неясно, что вы имеете в виду.

Во всяком случае, вы можете использовать значение rel="" (или data-items="" ), чтобы установить связь между одним, выбранным другим.

Например:

CSS

 .cascade { display: none; } 

HTML – Изменено

 <select name="category"> <option value="0">None</option> <option value="1" rel="accessories">Cellphones</option> <option value="2" rel="sports">Sports</option> <option value="3" rel="cars">Cars</option> </select> <select name="items" class="cascade"> <option value="3" class="accessories">Smartphone</option> <option value="8" class="accessories">Charger</option> <option value="1" class="sports">Basketball</option> <option value="4" class="sports">Volleyball</option> <option value="6" class="cars">Corvette</option> <option value="2" class="cars">Monte Carloe</option> </select> 

JQuery

 $(document).ready(function(){ var $cat = $('select[name=category]'), $items = $('select[name=items]'); $cat.change(function(){ var $this = $(this).find(':selected'), rel = $this.attr('rel'), $set = $items.find('option.' + rel); if ($set.size() < 0) { $items.hide(); return; } $items.show().find('option').hide(); $set.show().first().prop('selected', true); }); }); 

http://jsfiddle.net/userdude/bY5LF/

Вот еще один пример: в основном все данные находятся на странице в объекте, и вы используете его для отображения разных категорий FIDDLE

 var categories = { "None":[{value:'3', text:'No cataegory selected'}], "First":[{value:'1', text:'Bmw'},{value:'2', text:'Benz'}], "Second":[{value:'4', text:'Playstation'},{value:'5', text:'Xbox'},{value:'10', text:'Wii'}], "Third":[{value:'6', text:'Dell'},{value:'7', text:'Acer'}], "Fourth":[{value:'8', text:'Audi'},{value:'9', text:'Datsun'}] }; function selectchange(){ var select = $('[name=items]'); select.empty(); $.each(categories[$(':selected', this).text()], function(){ select.append('<option value="'+this.value+'">'+this.text+'</option>'); }); } $(function(){ $('[name=category]').on('change', selectchange); }); 

2 Рабочий демонстрационный код для вашего кода :) http://jsfiddle.net/PnSCL/2/ ИЛИ http://jsfiddle.net/PnSCL/

Это достижимо, но вам нужно установить связь между первым и вторым выбором.

Пожалуйста, загляните сюда: http://api.jquery.com/data/

Я добавил label для отношений здесь http://jsfiddle.net/PnSCL/2/ [ http://www.w3schools.com/tags/tag_option.asp ]

Поведение Когда вы выберете first вариант из select1, тогда он отобразит smartphone, chargers противном случае, когда пользователь выберет second из select1, он покажет baskeball, voleyball в select2.

Надеюсь, это поможет, Пожалуйста, дайте мне знать, если я пропустил что-нибудь.

Демо 1

Код

 $("#category").change(function() { if($(this).data('options') == undefined){ /*Taking an array of all options-2 and kind of embedding it on the select1*/ $(this).data('options',$('#select2 option').clone()); } var id = $(this).val(); var options = $(this).data('options').filter('[label=' + id + ']'); $('#select2').html(options); // alert(options); }); 

HTML

 <select name="select1" id="category"> <option value="0">None</option> <option value="1">First</option> <option value="2">Second</option> <option value="3">Third</option> <option value="4">Fourth</option> </select> <select name="items" id="select2"> <option value="3" label="1">Smartphone</option> <option value="8" label="1">Charger</option> <option value="1" label="2">Basketball</option> <option value="4" label="2">Volleyball</option> </select> 

DEMO 2 * код *

 $("#category").change(function() { if($(this).data('options') == undefined){ /*Taking an array of all options-2 and kind of embedding it on the select1*/ $(this).data('options',$('#select2 option').clone()); } var id = $(this).val(); var options = $(this).data('options').filter('[value=' + id + ']'); $('#select2').html(options); alert(options); }); 

HTML

 <select name="select1" id="category"> <option value="0">None</option> <option value="1">First</option> <option value="2">Second</option> <option value="3">Third</option> <option value="4">Fourth</option> </select> <select name="items" id="select2"> <option value="1">Smartphone</option> <option value="1">Charger</option> <option value="2">Basketball</option> <option value="2">Volleyball</option> </select> 

Рабочее решение без использования базы данных:

HTML

 <select name="country" id="country" onChange="showState();"> <option value="">Select Country</option> <option value="1">Pakistan</option> <option value="2">Saudi Arabia</option> </select> <div id="div_state"></div> 

Jquery

 <script> function showState() { $('body').css('cursor','wait'); var value = document.getElementById('country').value; var url = 'http://fiddle.jshell.net/rathoreahsan/WcKQ2/4/show/'; $.ajax({ type: "GET", url: url, data:{'country':value}, success:function(results) { $('#div_state').html(results); if (value == "1") { $('#PK').css('display','block') } else if (value == "2") { $('#SA').css('display','block') } $('body').css('cursor','default'); } }); } </script> по <script> function showState() { $('body').css('cursor','wait'); var value = document.getElementById('country').value; var url = 'http://fiddle.jshell.net/rathoreahsan/WcKQ2/4/show/'; $.ajax({ type: "GET", url: url, data:{'country':value}, success:function(results) { $('#div_state').html(results); if (value == "1") { $('#PK').css('display','block') } else if (value == "2") { $('#SA').css('display','block') } $('body').css('cursor','default'); } }); } </script> 

CSS:

 #PK, #SA { display: none; } 

SEE DEMO http://jsfiddle.net/rathoreahsan/WyLsh/

States Страница: http://fiddle.jshell.net/rathoreahsan/WcKQ2/4/show/

Просто предлагая, как вы можете это сделать –

 <select name="country" id="country" onChange="showState();" > <option value="">Select Country</option> <option value="1">India</option> <option value="2">Nepal</option> </select> 

Ваш сценарий –

 <script type="text/javascript"> function showState( ) { var value = document.getElementById('country').value; var url = '<?php echo base_url ?>showstate.php'; $.ajax({ type: "GET", url: url, data:{'country':value}, success:function(results) { $('#div_state').html(results); } }); } </script> 

Ваша страница showstate.php php –

 //INCLUDE CONNECTION file to for db query $type = $_GET['country']; //Your DB QUERIES //Your data on Get condition /*USING SWITCH-- switch ($type) { case "India": echo "I m in India"; break; case "Nepal": echo "I am in Nepal"; break; 

Это загрузит контент в вашем div #div_state . Вы также можете использовать Jquery. Для этого … я думаю, это поможет вам 🙂 и дайте мне знать, если у вас есть какие-либо запросы.

 $(document).ready(function(){ $('#causes').change(function(){ $.getJSON("<?=URL.$param->module."/".$param->controller?>/getcourtcauses",{causeId: $(this).val()}, function(j){ var options = ''; if(j.length > 1 ) { for (var i = 0; i < j.length; i++) { options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'; } if($('#subcauses').hide()) { $('#subcauses').show(); } $('#subcauses').attr('disabled', false); $("#subcauses").html(""); $("#subcauses").html(options); } else { $('#subcauses') .find('option') .remove() .end(); $('#subcauses').attr('disabled', true); } });