第一个下拉菜单自动更改第二个下拉菜单的选项
Posted
技术标签:
【中文标题】第一个下拉菜单自动更改第二个下拉菜单的选项【英文标题】：First drop down menu to auto change the options of a second dropdown 【发布时间】：2012-06-29 13:48:18 【问题描述】：我有两个下拉菜单，其中的选项不是从数据库中获取的。
第一个，让用户选择一个类别。
<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>
第二个选项取决于第一个下拉菜单中的选项。例如，如果用户选择 First 选项，则会显示第二个下拉菜单
<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>
我的问题是我怎样才能做到这一点？这可以在不使用数据库的情况下完成吗？
谢谢！
【问题讨论】：
下拉项的值从何而来？ 当然可以..为此使用 Ajax 对于数据库，可以看我的回答。我已经解释了我是如何做到的。 :) 也添加了无数据库版本！ :) 【参考方案1】：请参阅下面的不使用数据库的工作示例。
使用 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> 之后，您需要给另一个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>'
?>
【讨论】：
对于 mysql 版本来说真的很方便。谢谢。 @Kaoukkos 谢谢，我也包含了无数据库版本！！！希望能帮助到你！ :) 我正在尝试使用它，因为它似乎也解决了我的问题。在非数据库示例中，$data 定义为什么？
应该是：'<option value="', $id,'">', $name,'</option>'
看起来您正在向 process.php 文件发送一个数组。对吗？【参考方案2】：
关于数据库的部分不是很清楚，因为选择可能会以某种方式“列出”。如果您有其他格式的文件，这是有道理的，或者如果您询问是否需要回电数据库 (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/
【讨论】：
【参考方案3】：这是另一个例子，基本上所有的数据都在一个对象的页面上，你用它来显示不同的类别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);
);
【讨论】：
@Kaoukkos 是的，这很好.. 请也看看我的回答，你也可以使用我的技术。【参考方案4】：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]
行为 当您从 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>
【讨论】：
谢谢你。关于您的第一个链接jsfiddle.net/PnSCL/2我应该如何列出名称而不是标签编号？ 我问的是第一个示例，因为需要第二个下拉菜单的唯一值。 嗨，@Kaoukkos 如何生活？:) 是的，你可以，如果它不起作用，请给我一个演示，进一步所以关于第一个演示，映射在第二个选择的第一个选择1 id 到 label 之间。实际上，您可以在 id 和 select2 名称之间进行名称映射。如果我遗漏了什么，请告诉我，希望对您有所帮助，:)
一切都很好。我也希望你也一样。我的具体意思是，当我选择例如 First form 第一个下拉列表时，我得到标签的数量而不是选项的名称。
@Kaoukkos 嘿 Cooleos 伙计，啊，你的意思是不是 id 你想要你的 name 属性？ :) 只需将选择更改为$("select[name=whatevername]")，如下所示：jsfiddle.net/PnSCL/8 :P【参考方案5】：
不使用任何数据库的工作解决方案：
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/
【讨论】：
【参考方案6】：这是一个非常简单的完整示例：
外部 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>
Full Demo
【讨论】：
【参考方案7】：只是建议你如何做到这一点--
<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。我认为这会对您有所帮助 :) 如果您有任何疑问，请告诉我。
【讨论】：
@Sibu 你读过我的代码吗 --> "showstate.php" //Your DB QUERIES //如果他想运行 db 查询，他可以并且如果他想简单地运行，则获取条件上的数据使用数据他可以根据自己的要求编写开关条件。 @swapnesh 请告诉我如何使用showstate.php文件中的开关条件 @Kaoukkos np...让我写下你需要的东西:) @Kaoukkos 我编辑了我的答案请看一下..在 showstate.php-edited 区域..也使用默认大小写【参考方案8】：$(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);
);
【讨论】：
您能解释一下这是做什么的，为什么以及如何工作？以上是关于第一个下拉菜单自动更改第二个下拉菜单的选项的主要内容，如果未能解决你的问题，请参考以下文章