级联下拉菜单不能使用JS [英] Cascade dropdown not working using JS
本文介绍了级联下拉菜单不能使用JS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何解决这个问题？
PHP下拉列表：
< form action =''method ='post'name ='resumeDatabank'id = 'resumeDatabank' >
< div class =div-select>
< label for =list_positionid =＃ddress_search LABEL>位置< / label>
< br />
< select name =list_positionid =filterbyposition>
< option name =defaultclass =filter_byselected =selectedvalue =按位置选择>按位置选择< / option>
<？php
foreach（$ query_position as $ option）{
if（isset（$ _ POST ['list_position']）&& $ _POST ['list_position'] == $ option-> position）
echo'< option name =list_positionclass =filter_byselected ='。$ option-> position。'>'。 $ option-> position。'< / option>';
else
echo'< option name =list_positionclass =filter_byvalue ='。$ option-> position。'>'。 $ option-> position。'< / option>';
};
？>
< / select>
< / div>
< div class =div-select>
< label for =list_locationid =＃ddress_search LABEL>位置< / label>
< br />
< select name =list_locationid =filterbylocation>
< option name =defaultclass =filter_byselected =selectedvalue =按位置选择>按位置选择< / option>
<？php
foreach（$ query_locations as $ option）{
if（isset（$ _ POST ['list_location']）&& $ _POST ['list_location'] == $ option-> hiring_location）
echo'< option name =list_locationclass =filter_byselected value ='。$ option-> hiring_location。'>'。 $ option-> hiring_location。'< / option>';
else
echo'< option name =list_locationclass =filter_byvalue ='。$ option-> hiring_location。'>'。 $ option-> hiring_location。'< / option>';
};
？>
< / select>
< / div>
< div class =div-select>
< label for =list_processedid =＃ddress_search LABEL>已处理< / label>
< br />
< select name =list_processedid =filterbyprocessed>
< option name =defaultclass =filter_byselected =selectedvalue =按处理选择>按处理选择< / option>
<？php
foreach（$ query_processed as $ option）{
if（isset（$ _ POST ['list_processed']）&& $ _POST ['list_processed'] == $ option-> processed_option）
echo'< option name =list_processedclass =filter_byselected value ='。$ option-> processed_option。'>'。 $ option-> processed_option。'< / option>';
else
echo'< option name =list_processedclass =filter_byvalue ='$ option-> processed_option。'>'。 $ option-> processed_option。'< / option>';
};
？>
< / select>
< / div>
< div class =div-input>
< input type =submitvalue =Searchclass =div-input-submit/>
< / div>
< / form>
JS：
code> jQuery（＃filterbyposition）。live（'change'，function（）{
var selectVal = jQuery（'＃filterbyposition：selected'）。val（）;
alert selectVal）;
var $ output = jQuery（'＃filterbylocation'）。html（''）;
jQuery.ajax（{
url：'page-resume-databank
data：n =+ selectVal，
dataType：'json'，
success：function（data）{
jQuery.each（data，function key，value）{
$ output.append（< option value ='+ value.id +'>+ value.filterbylocation +< / option>）;
}） ;
}
}）;
}）;
解决方案
在page-resume-databank.php中回显输出在选择形式，然后在ajax中的响应只是追加第二个下拉。不需要.aach函数ajax
ajax请求
var strURL = ？findStateing.php平台= + XX;
var req = getXMLHTTP（）;
if（req）{
req.onreadystatechange = function（）{
if（req.readyState == 4）{
//仅当OK
if（req.status == 200）{
document.getElementById（'declarediv'）。innerHTML = req.responseText;
} else {
alert（使用XMLHTTP时出现问题：\\\
+ req.statusText）;
}
}
}
req.open（GET，strURL，true）;
req.send（null）;
}
findStateing.php respone echo如下
$ xx = $ _ GET ['platform'];
< select name =amountid =amountclass =form-controlrequired>
<？php $ query = mysql_query（SELECT * FROM table WHERE xx ='$ xx'）;
while（$ result = mysql_fetch_array（$ query））{？>
< option value =<？php echo $ result ['pv'];？>><？php echo $ result ['pv'];？> PV& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& ; & nbsp;& nbsp;& nbsp;<？php if（strlen（$ result ['pv']）< 4）{echo& nbsp;& nbsp; ; }？> MYR<？php echo $ result ['rm'];？>< / option>
<？php}？>
< / select>
I have one file with PHP and JS. In this file I have 3 dropdowns, I tried to apply the cascading but it's not working. When I choose an option in the first dropdown, the 2nd dropdown down have no value.
How to fix this?
PHP for dropdown:
<form action='' method='post' name='resumeDatabank' id='resumeDatabank'>
<div class="div-select">
<label for="list_position" id="#ddress_search LABEL">Position</label>
<br/>
<select name="list_position" id="filterbyposition">
<option name="default" class="filter_by" selected="selected" value="Select by Position">Select by Position</option>
<?php
foreach($query_position as $option){
if(isset($_POST['list_position']) && $_POST['list_position'] == $option->position)
echo '<option name="list_position" class="filter_by" selected value="'. $option->position .'">'. $option->position .'</option>';
else
echo '<option name="list_position" class="filter_by" value="'. $option->position .'">'. $option->position .'</option>';
};
?>
</select>
</div>
<div class="div-select">
<label for="list_location" id="#ddress_search LABEL">Location</label>
<br/>
<select name="list_location" id="filterbylocation">
<option name="default" class="filter_by" selected="selected" value="Select by Location">Select by Location</option>
<?php
foreach($query_locations as $option){
if(isset($_POST['list_location']) && $_POST['list_location'] == $option->hiring_location)
echo '<option name="list_location" class="filter_by" selected value="'. $option->hiring_location .'">'. $option->hiring_location .'</option>';
else
echo '<option name="list_location" class="filter_by" value="'. $option->hiring_location.'">'. $option->hiring_location .'</option>';
};
?>
</select>
</div>
<div class="div-select">
<label for="list_processed" id="#ddress_search LABEL">Processed</label>
<br/>
<select name="list_processed" id="filterbyprocessed">
<option name="default" class="filter_by" selected="selected" value="Select by Processed">Select by Processed</option>
<?php
foreach($query_processed as $option){
if(isset($_POST['list_processed']) && $_POST['list_processed'] == $option->processed_option)
echo '<option name="list_processed" class="filter_by" selected value="'. $option->processed_option .'">'. $option->processed_option .'</option>';
else
echo '<option name="list_processed" class="filter_by" value="'. $option->processed_option.'">'. $option->processed_option .'</option>';
};
?>
</select>
</div>
<div class="div-input">
<input type="submit" value="Search" class="div-input-submit"/>
</div>
</form>
JS:
jQuery("#filterbyposition").live('change',function() {
var selectVal = jQuery('#filterbyposition :selected').val();
alert(selectVal);
var $output = jQuery('#filterbylocation').html('');
jQuery.ajax({
url: 'page-resume-databank.php',
data: "n="+selectVal,
dataType: 'json',
success: function(data){
jQuery.each(data, function(key,value){
$output.append("<option value='"+value.id+"'>"+value.filterbylocation+"</option>");
});
}
});
});
解决方案
In page-resume-databank.php echo the output in select form and then the response in the ajax just append for second drop down. no need of .each function after ajax
ajax request
var strURL="findStateing.php?platform="+xx;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('statediv').innerHTML=req.responseText;
} else {
alert("Problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
findStateing.php respone echo as below
$xx=$_GET['platform'];
<select name="amount" id="amount" class="form-control" required>
<?php $query=mysql_query("SELECT * FROM table WHERE xx='$xx'");
while($result=mysql_fetch_array($query)){ ?>
<option value="<?php echo $result['pv'];?>"><?php echo $result['pv'];?> PV <?php if(strlen($result['pv']) < 4) { echo " "; }?>MYR <?php echo $result['rm'];?></option>
<?php } ?>
</select>
这篇关于级联下拉菜单不能使用JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
