我创建了一个下拉菜单，其中包含一个查询数据库的foreach循环。
现在，当我通过javascript从菜单中选择一个子项时，我希望获取值，并使用ajax请求获取第一个菜单中选择的项目的子菜单中的所有值，并返回到javascript或jquery，这些值附加到html中的第二个li部分中分开。
第一个菜单由表格区域生成，第二个菜单由桌室生成这是结构：
area alpha --> room 1, room 2, room 3
area beta --> room 4, room 5
area gamma --> romm6 room 7
...
下面的代码不是那么成功！
主要问题是：
1） 从 li 标签区域检索数据2）必须在数组中获取房间的ajax查询3） 在 HTML 中附加第二个 li 标记房间中的房间以显示房间JavaScript 和 jquery 代码：
function chooseroomajax(id_box, id, db){
var content=$('#'+id_box).val();
var requestaj = $.ajax({
type: "POST",
url: "ajaxsave.php?action=select_room",
data: "id="+ id +"&db=" + db +"&content=" + content +"&field=" + id_box,
success: function(msg){
//alert( "select a: "+id_box+" runs good" );
}
});
requestaj.done(function(data) {
alert(data);
for (var i = 0; i <= data.lenght; i++){
$("#room").after( ' </br><a class="avatar"><img id ="fotopaz" src= "http://185.17.106.207:9997/crm/foto/'+ data+'" alt="no foto" width="90" height="90" align="left" title="Controlla" /></a></br></br></br>');
}
});
}
function chooseroom() {
//This way We Can get data from the li tag between ul
$("#reparto li").click(function() {
//alert(this.id); // id of clicked li by directly accessing DOMElement property
//alert($(this).attr('id')); // jQuery's .attr() method, same but more verbose
//alert($(this).html()); // gets innerHTML of clicked li
alert($(this).text()); // gets text contents of clicked li
var area2 = $(this).attr('id');
});
chooseromeajax(area2, "", "crmappdb");
}
HTML PHP 代码：
<li id ="liarea" class="dropdown" " >
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> Area<b class="caret"></b></a>
<ul id = "area" class="dropdown-menu">
<?php
foreach($db->query("SELECT * FROM area ") as $row) {
?>
<li id = "<?php echo $row['idarea']; ?>" onclick ="chooseroom()" >
<?php echo $row['descrizione'];
?>
</li>
<?php
}
?>
</ul>
</li>
<li id = "room">
</li>
</li>
ajaxsave.php：
if ($_REQUEST['action']=='select_room'){
$db=$_REQUEST['db'];
$campo=$_REQUEST['field'];
$contenuto=$_REQUEST['content'];
$id=$_REQUEST['id'];
$db = new PDO('mysql:host=localhost;dbname=crmappdb;charset=utf8', 'root', '', array(PDO::ATTR_EMULATE_PREPARES => false,
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
foreach($db->query("SELECT * FROM area WHERE descr = $field") as $row) {
$idarea = $row['idarea'];
}
foreach($db->query("SELECT * FROM room WHERE area = $idarea") as $row) {
$idroom = $row['idroom'];
}
if (isset($idstanza)){
}else{
$idroom = "no rooms";
}
echo $field ;
}
您所要求的称为"级联下拉列表"，并且有许多开源实现。一个例子是这个jQuery插件：
http://www.dnasir.com/github/jquery-cascading-dropdown/demo.html
我认为如果您使用 SELECT 标签会更容易，因为它可以通过 onChange 控制它的事件。
对于您的情况，只需创建 2 个下拉列表，一个带有生成的 PHP 列表，另一个将由 JS 生成，现在应该将其留空
<div class="dropdown">
<button>...</button>
<ul id="liarea">
<!-- generated li here -->
</ul>
</div>
<div class="dropdown">
<button>...</button>
<ul id="room"></ul> <!-- empty list -->
</div>
然后在js上，只需使用jquery单击事件即可。 在你的代码中，现在你在每个列表上使用内联JavaScript，然后在该函数中调用另一个点击事件。
$('#liarea').on('click', 'li', function(){
// ajax call and append the #room list
});
$('#room').on('click', 'li', function(){
// any function you want to
});
检查这个jsfiddle