Question

我有几个选择菜单填充了来自PHP / MySQL脚本的数据。如果在第一个选择菜单中选择了在数组中定义的值，则会出现第二个菜单。如果随后将第一个选择菜单更改为不在数组中的值，则第二个菜单将再次消失。但是，我也希望从第二个菜单中清除选择。我尝试了一些事情（目前已经注释掉了），但似乎无法使其发挥作用。

我错过了什么？

Live page

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);
            }
        });
      });

Answer 1

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

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

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

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

1 个答案: