[英]jQuery 3 dropdown menu - onChange
我有三个填充的下拉菜单。 每个下拉菜单都是根据先前选择的内容填充的。 这意味着“选择器2”的选择是基于“选择器1”的选择,而“选择器3”的选择是基于“选择器2”的选择。 下拉菜单是使用jquery动态填充的,其来源来自MySQL表。
当我选择“选择器1”时,它将填充“选择器2”,当我选择“选择器2”时,它将填充“选择器3”。 这很好。 问题在于,如果我选择了“选择器1”,“选择器2”和“选择器3”,并且更改了“选择器1”,则“选择器2”的值会丢失(应该是多少),但是该值选择器3的“ A”保留在那里。 我希望在更改“选择器1”时重置选择器3的值,而不保留先前的旧选择器的旧值。
这是我的jQuery
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
function getTertiary(val) {
$.ajax({
type: "POST",
url: "get_tertiary.php",
data:'tertiary_cat='+val,
success: function(data){
$("#tertiary_cat").html(data);
}
});
}
function getSecondary(val) {
$.ajax({
type: "POST",
url: "get_secondary.php",
data:'primary_cat='+val,
success: function(data){
$("#secondary_cat").html(data);
}
});
}
function selectPrimary(val) {
$("#search-box").val(val);
$("#suggesstion-box").hide();
}
</script>
这是我的html:
<div class="frmDronpDown">
<div class="row">
<label>Primary:</label><br/>
<select name="primary_cat" id="primary_cat" class="demoInputBox" onChange="getSecondary(this.value);">
<option value="">Select Primary</option>
<?php
foreach($results as $primaryCat) {
?>
<option value="<?php echo $primaryCat["primary_cat"]; ?>"><?php echo $primaryCat["primary_cat"]; ?></option>
<?php
}
?>
</select>
</div>
<div class="row">
<label>Tertiary:</label><br/>
<select name="secondary_cat" id="secondary_cat" class="demoInputBox" onChange="getTertiary(this.value);">
<option value="">Select Seconary</option>
</select>
</div>
<div class="row">
<label>State:</label><br/>
<select name="tertiary_cat" id="tertiary_cat" class="demoInputBox">
<option value="">Select Tertiary</option>
</select>
<input type="text"/>
</div>
</div>
当我尝试-改变
<select name="primary_cat" id="primary_cat" class="demoInputBox" onChange="getSecondary(this.value);">
至:
<select name="primary_cat" id="primary_cat" class="demoInputBox" onChange="getSecondary(this.value);getTertiary(this.value);">
我在error_log中收到此错误
PHP Warning: Invalid argument supplied for foreach()
可能$results
值不是数组,因此在此处添加检查将解决您的问题
<?php
if (is_array($results)){
foreach($results as $primaryCat) {
?>
<option value="<?php echo $primaryCat["primary_cat"]; ?>"><?php echo $primaryCat["primary_cat"]; ?></option>
<?php
}
}
?>
像这样重新重置第二个DDown时,重置第三个DDown的值:
function getSecondary(val) {
$.ajax({
type: "POST",
url: "get_secondary.php",
data:'primary_cat='+val,
success: function(data){
$("#secondary_cat").html(data);
$("#tertiary_cat").html('<option value="">Select Tertiary</option>')
}
});
}
您可以更改getSecondary,以在主要更改时清除第三个下拉列表,如下所示:
function getSecondary(val) {
$.ajax({
type: "POST",
url: "get_secondary.php",
data:'primary_cat='+val,
success: function(data){
$("#secondary_cat").html(data);
$('#tertiary_cat').html('<option value="">Select Tertiary</option>')
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.