语法问题 - 如果进行了另一个选择，则隐藏和显示选择器

Question

我被这段代码卡住了。总而言之，它应该可以工作，我已经盯着它看了 2 个小时，我不知道出了什么问题。

我在 div 中有两个选项。当使用正确的父 id 选择一个时，应该出现子类别，尽管我觉得我做得很好，但由于某种原因它不会出现 - 这是我的主页的 html/php：

<li>
            <label for="Catid">Pick a Category:</label>
            <select id="Catid">
              <?php
                  $Products = New Products();
                  $Products->form_Cat_Picker();
                ?>
            </select>
          </li>
          <li>
            <label for="Subcatid">Sub Category:</label>
              <?php
                  $Products = New Products();
                  $Products->form_Subcat_Picker();
                ?>
          </li>
          <script type="text/javascript">
            $(document).ready(function() {
                $('#Catid').change(function(){
                    var optvalue = $(this).val(),
                    div = $('#' + 'parentid' + optvalue);
                    $('div').hide();
                    div.show();
                });
            });​
          </script>
          <li>

这里有两个函数：

function form_Cat_Picker() {
    $mysqli = new mysqli(DB_SERVER, DB_USER, DB_PASSWORD, DB_NAME);
    if (!$mysqli) {
        die('There was a problem connecting to the database.');
    }       
    $catPicker = "SELECT Catid, Catname
            FROM ProductCats
            ORDER BY Catid";
    if ($Result = $mysqli->query($catPicker)){
        if (!$Result) {
            echo 'Could not run query: ' . mysql_error();
            exit;
        }
        echo '<option value="">'.''.'</option>';
        while ($row = $Result->fetch_assoc()) {
            echo '<option value="'.$row["Catid"].'">'.$row["Catname"]."</option>";
            echo '</div>';
        }
    }
    $mysqli->close();
}
function form_Subcat_Picker() {
    $mysqli = new mysqli(DB_SERVER, DB_USER, DB_PASSWORD, DB_NAME);
    if (!$mysqli) {
        die('There was a problem connecting to the database.');
    }       
    $catPicker = "SELECT Subcatid, Subcatname, Parentid
            FROM ProductSubCats
            ORDER BY Subcatid";
    if ($Result = $mysqli->query($catPicker)){
        if (!$Result) {
            echo 'Could not run query: ' . mysql_error();
            exit;
        }
        $counter = 0;
        while ($row = $Result->fetch_assoc()) { 
            if ($counter >= 1) {
                if ($last_id != $row['Parentid']){
                    echo '</select>';
                    echo '</div>';
                }
            }
            if ($last_id != $row['Parentid']){
                    echo '<div id="parentid'.$row['Parentid'].'" style="display:none">';
                    echo '<select id="Subcatid">';
                }
            echo '<option value="'.$row["Subcatid"].'">'.$row["Subcatname"]."</option>";
            $last_id = $row['Parentid'];
            $counter++;
        }
        echo '</select>';
        echo '</div>';
    }
    $mysqli->close();
}

这些输出如下：

<li>
<label for="Catid">Pick a Category:</label>
<select id="Catid">
<option value=""/>
<option value="1">Sample 1</option>
<option value="2">Sample 2</option>
<option value="3">Sample 3</option>
<option value="4">Sample 4</option>
<option value="5">Sample 5</option>
<option value="6">Sample 6</option>
<option value="7">Sample 7</option>
</select>
</li>
<li>
<label for="Subcatid">Sub Category:</label>
<div id="parentid1" style="display: none;">
<select id="Subcatid">
<option value="1">Sub Sample 1</option>
<option value="2">Sub Sample 2</option>
</select>
</div>
</li>

所以输出看起来不错。 jquery 似乎是正确的。 但是当我尝试运行它时 - 选择 Sample 1 时不会出现 div id parentid1。

我会失明还是做错了什么？谢谢

编辑

甚至可以在 jfiddle 中使用： http://jsfiddle.net/VGDwm/ 我正确调用了 jquery 库：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"/>

可能出了什么问题？ jquery 应该在 div 之后还是之前？或者这是从php调用的问题？

Answer 1

1. 不要每次函数都重新连接数据库
2. 重新键入 jquery 的最后一行，它的末尾有一个隐藏字符。

所以这里突出显示的行：

      <script type="text/javascript">
        $(document).ready(function() {
            $('#Catid').change(function(){
                var optvalue = $(this).val(),
                div = $('#' + 'parentid' + optvalue);
                $('div').hide();
                div.show();
            });
        });​    <----- THIS LINE ------>
      </script>