清除頁面/菜單更改菜單 - php/AJAX

我有3個選擇菜單 - 產品，主題和子主題。選擇全部三項將顯示所選內容的常見問題解答。那部分工作正常。我的問題是，一旦選擇了3個常見問題解答並顯示，如果用戶返回並選擇另一個產品，則下面的菜單和文本將保留在那裏。我希望他們消失。我已經嘗試了$（。'div'）。hide（）在幾個位置，無濟於事。談到AJAX，我有點兒綠色。這裏是我的代碼：清除頁面/菜單更改菜單 - php/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對您有所幫助。

來源

2014-01-16 Jen Mason

我在HTML中看不到'$（＃product）'元素。 – Manolo

添加了產品元素。 –

你有沒有CSS規則：'.box {display：whatelse！important;}'？ – Manolo

我最終只是向必要的div添加一個空字符串。

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

訣竅。現在，當更改最頂層（產品）選擇時，下面的div將清除。也許不是最高效的（???），但它的工作原理！

來源

2014-01-22 17:02:21

清除頁面/菜單更改菜單 - php/AJAX

回答

相關問題