>我有两个下拉菜单，其中的选项不是从数据库中获取的。
第一个，允许用户选择一个类别。
<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 name="items">
<option value="3">Smartphone</option>
<option value="8">Charger</option>
</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>
现在对于 jQuery 函数，你可以这样做：
<script type="text/javascript">
function ajaxfunction(parent)
{
$.ajax({
url: 'process.php?parent=' + parent;
success: function(data) {
$("#sub").html(data);
}
});
}
</script>
在 HTML 中，在 <select> 之后，您需要给出另一个带有id select作为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/
这是另一个例子，基本上所有数据都在页面上的对象中，您可以使用它来显示不同的类别 小提琴
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/OR http://jsfiddle.net/PnSCL/
这是可以实现的，但您需要在第一个和第二个选择之间建立关系。
也请看这里：http://api.jquery.com/data/
我在这里添加了关系label http://jsfiddle.net/PnSCL/2/[ http://www.w3schools.com/tags/tag_option.asp ]
行为 当您从 select1 中选择first选项时，它将显示smartphone, chargers否则当用户从 select1 中选择second时，它将在 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>
演示 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/
这是一个非常简单的完整示例：
外部 URL 将向我们发送选项列表，然后我们将使用 jquery $（selector）.html（） 方法将该下拉列表分配给第二个下拉菜单。
<script type="text/javascript">
$("#country").on('change',function(){
var country= $(this).val();
$.ajax({
url: 'cities.php' ,
type: 'POST',
data: "country="+country,
success: function(cities)
{
$("#cities").html(cities);
}
});
});
</script>
完整演示
只是建议你怎么做——
<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_statediv 中的内容。你也可以使用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);
}
});