我有几个选择菜单,其中填充了来自PHP / MySQL脚本的数据。如果在第一个选择菜单中选择了在数组中定义的值,则会出现第二个菜单。如果随后将第一个选择菜单更改为不在数组中的值,则第二个菜单将再次消失。但是,我也想清除第二个菜单中的选择。我已经尝试了一些方法(当前已注释掉),但似乎无法使其正常工作。
我想念什么?
HTML:
<select name="BeerStyle" tabindex="0" id="BeerStyle" data-native-menu="false" data-corners="false" data-theme="f">
<option value="">Select a Style...</option>
<?php
//SQL Query
$query = "SELECT styleID, style FROM style ORDER BY ID ASC";
//Prepare Query, Bind Parameters, Excute Query
$STH = $DBH->prepare($query);
$STH->execute();
while($row = $STH->fetch(PDO::FETCH_ASSOC)) {?>
<option value="<? echo $row['styleID']?> - <? echo $row['style']?>"><? echo $row['styleID']?> - <? echo $row['style']?></option><?
}
?>
</select>
<p id="pBaseStyle" style="display: none;">
<select name="BaseStyle" tabindex="0" id="BaseStyle" data-native-menu="false" data-corners="false" data-theme="f">
<option value="">Select a Base Style...</option>
<?php
//SQL Query
$query = "SELECT styleID, style FROM style ORDER BY ID ASC";
//Prepare Query, Bind Parameters, Excute Query
$STH = $DBH->prepare($query);
$STH->execute();
while($row = $STH->fetch(PDO::FETCH_ASSOC)) {?>
<option value="<? echo $row['styleID']?> - <? echo $row['style']?>"><? echo $row['styleID']?> - <? echo $row['style']?></option><?
}
?>
</select>
</p>
JS:
var ShowBaseStyle = [ "5C - Doppelbock",
"20 - Fruit Beer",
"20A - Fruit Beer",
"21 - Spice/Herb/Vegetable Beer",
"21A - Spice, Herb, or Vegetable Beer",
"21B - Christmas/Winter Specialty Spiced Beer",
"22B - Other Smoked Beer",
"22C - Wood-Aged Beer",
"23 - Specialty Beer",
"23A - Specialty Beer",
"26B - Braggot"];
$(document).ready(function () {
$('#BeerStyle').change(function() {
if (jQuery.inArray( $(this).val(), ShowBaseStyle )!==-1) {
$('#pBaseStyle').show();
} else {
$('#pBaseStyle').hide();
//$("#BaseStyle").empty();
//$('#BaseStyle')[0].selectedIndex = 0;
//$("#BaseStyle option:first").attr("selected", true);
}
});
});
修改所选项目时,需要刷新控件:
$('#BaseStyle').val('').selectmenu('refresh');
这里发生的是,您的整个问题与纯HTML / JavaScript无关,而与jQuery Mobile UI有关。JMUI添加了额外的控件层,因此当您更改基础纯HTML控件时,您需要刷新它们。我怀疑应该有用于自动绑定的例程,但是在这种情况下它们无法工作/配置。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句