清除基于其他选择菜单的选择菜单

大师

我有几个选择菜单,其中填充了来自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);
            }
        });
      });
亚历克斯·奈特卡乔夫(Alex Netkachov)

修改所选项目时,需要刷新控件:

$('#BaseStyle').val('').selectmenu('refresh');

这里发生的是,您的整个问题与纯HTML / JavaScript无关,而与jQuery Mobile UI有关。JMUI添加了额外的控件层,因此当您更改基础纯HTML控件时,您需要刷新它们。我怀疑应该有用于自动绑定的例程,但是在这种情况下它们无法工作/配置。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章