首先下拉菜单自动更改第二个下拉列表的选项
我有两个下拉菜单，其中的选项不是从数据库中获得的。
第一个，让用户select一个类别。
<select name="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第一个选项，则会显示第二个下拉菜单
<select name="items"> <option value="3">Smartphone</option> <option value="8">Charger</option> </select>
但是当用户改变主意，或者先select第二个选项，那么现在将显示第二个下拉菜单
<select name="items"> <option value="1">Basketball</option> <option value="4">Volleyball</option> </select>
我的问题是我怎么能做到这一点？ 这可以做到不使用数据库？
谢谢！
请参阅下面的内容以查看不使用数据库的工作示例 。
使用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>
现在的jQueryfunction，你可以这样做：
<script type="text/javascript"> function ajaxfunction(parent) { $.ajax({ url: 'process.php?parent=' + parent; success: function(data) { $("#sub").html(data); } }); } </script>
在HTML中，在<select> ，你需要给另一个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中replace这个。
<?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>' ?>
关于数据库的部分不是很清楚，因为这些select可能会以某种方式被“列出”。 如果你有其他的格式，这是有道理的，或者如果你问是否需要回数据库（ postback ），答案是否定的。 但是不清楚你的意思。
无论如何，你可以使用一个rel="" value（或者data-items="" ）来设置这个select之间的关系。
例如：
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); }); });
这里是另一个例子，基本上所有的数据都在一个对象的页面上，并用它来显示不同的类别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/
这是可以实现的，但是你需要在第一和第二select之间build立关系。
请在这里看看： http : //api.jquery.com/data/
我在这里添加了关系label http://jsfiddle.net/PnSCL/2/ [ http://www.w3schools.com/tags/tag_option.asp ]
行为当您从select1中selectfirst选项时，它将显示smartphone, chargers否则当用户从select1中selectsecond时，它将显示baskeball, voleyball在select2中显示baskeball, voleyball 。
希望这有助于，请让我知道，如果我错过了什么。
演示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>
CSS：
#PK, #SA { display: none; }
看演示 http://jsfiddle.net/rathoreahsan/WyLsh/
国家页面： http : //fiddle.jshell.net/rathoreahsan/WcKQ2/4/show/
只是build议你如何做到这一点 –
<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_state div中的内容。 你也可以使用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); } });
