Question

我有3个选择菜单 - 产品，主题和子主题。选择所有三个将显示所选内容的常见问题解答。那部分工作正常。我的问题是，一旦选择了所有3个并且常见问题解答显示，如果用户返回并选择其他产品，则下面的菜单和文本仍保留在那里。我想让他们消失。我在几个地方试过$（。'div'）。hide（），但没有用。在AJAX方面，我有点绿。这是我的代码：

$(document).ready(function() {
            $('.box').hide();


            $('#product').on('change', function() {
                $('.box').hide();

                $('#'+$(this).val()).show();

            });     

            $('#topic').on('change', function() {  
                var sel = $(this).find('option:selected').text();
                $.ajax({
                    url: "support_process.php",
                    type: "POST",
                    data: {info : sel},
                    success: function(data) {
                        $( ".divtopic" ).html(data);
                    }
                });
            }); 

            $('body').on('change', '#subtopic', function(){
                var sel = $(this).find('option:selected').text();
                $.ajax({
                    url: "subtopic_process.php",
                    type: "GET",
                    data: {info : sel},
                    success: function(data) {
                        $( ".divsubtopic" ).html(data);
                    }
                });
            }); 

        });

和html：

<div class="styled-select">
   <select id="product">
     <option value="option0">Select product...</option>
     <?php
      while ($row = mysqli_fetch_array($sql))
      {
        $name = $row['name'];
        echo "<option value=\"option$count\">" . $name . "</option>";
        $count++;
      }
      ?>
   </select>
 </div>
<div id="option1" class="box"> 
      <div class="content">

      <?php
      $sql = mysqli_query($dbConnection, "SELECT t.id, t.topic FROM topic t JOIN product p ON p.id = t.p_id WHERE p.name='Hello'");
      ?>

      <div class="styled-select">
        <select name="topic" id="topic">
          <option value="optiont0" selected="selected">Select a topic for Hello...</option>
          <?php
           while ($row = mysqli_fetch_array($sql))
          {
            echo "<option value=\"optiont$count\" name=\"topic[]\">" . $row['topic'] . "</option>";
            $count++;
          }

          ?>

        </select>
       </div> 
        <div class="divtopic"></div>

        <div class="divsubtopic">
        </div>
    </div>
    </div>

TIA求助。

Answer 1

我最后只是在必要的div中添加一个空字符串。

$('.divtopic').html('');
$('.divsubtopic').html('');

诀窍。现在，当更改最顶层（产品）选择时，下面的div清除。也许不是最有效的（???），但它有效！

菜单更改清除页面/菜单 - php / AJAX

1 个答案: