刷新后留在同一頁面上

Question

我有一個包含表單的頁面，輸入類型為select的javascript偵聽器，該事件為onchange，具體取決於從選擇頁面中選擇的選項，該頁面將顯示一個輸入塊（div），我正在使用隱藏和顯示來顯示或隱藏html元素塊，這些div之一（div 2）的輸入類型也會與ajax call的onchange事件一起選擇。 我的第一個問題是，在單擊表單瀏覽器的驗證按鈕后，我帶來了默認的div，我希望他停留在上一個div；第二個問題是，刷新ajax調用后的div 2沒有帶來任何數據，這是自事件以來的邏輯在變化。 因此，如果已顯示div 2，則希望刷新后可以執行ajax調用。

這是我的html代碼

 <form id="boxpanel" class="form-panel" method='POST' enctype='multipart/form-data' action='<?php echo URL.htmlspecialchars('ads');?>'>

      <div>

     <label for='catego'><b>categories: </b><span>(*)</span></label>
     <span><select name="catego" id="catego">
     <option value='0'>select a category </option>
      <?php
  foreach($this->categories as $key => $value) { ?>

      <option value=<?php echo $value['id'];?>  <?php if (isset($_POST['catego']) && $_POST['catego'] == $value['id']){ echo 'selected';}else{ echo '';}?>> <?php echo $value['categorie'] ;?></option>


        <?php 

    }
?>  
      </select><br /></span>

 </div>


 <div id="div12" class="hide">
<br />
 <div>
            <label for='mark'><b>cars:</b> <span>(*)</span></label>
      <select  name='cars' id='cars' onchange="showHint(this.value)">
       <option value=0>s1</option>
        <option value=2>s2</option>
         <option value=3>s3</option>


      </select>
      </div>
      <br />
      <div>
      <label for='categos'><b>Models:</b></label>
     <select id="txtHintts" name="model"  class="form-control">
     </select>

     </div>
      <br />

</div>

 <div id="div13" class="hide">
<br />
 <div>
            <label for='wheels'><b>wheels:</b> <span>(*)</span></label>
      <select  name='wheels' id='wheels'>
       <option value=0>c</option>
        <option value=2>v</option>
         <option value=3>v</option>


      </select>
      </div>
      <br />
      <div>

               <label for='wheels'><b>colors:</b> <span>(*)</span></label>
      <select  name='colors' id='colors'>
       <option value=0>a</option>
        <option value=2>d</option>
         <option value=3>c</option>


      </select>
     </div>
      <br />

</div>
</div>

這就是我制作隱藏和顯示作品的方式

<script>

function catego() {     

    if ($('#catego').val() == 1 ) {
        $('#div12').removeClass('hide');
        $('#div13').addClass('hide');

    }

    if ($('#catego').val() == 2) {
        $('#div12').addClass('hide');
        $('#div13').removeClass('hide');
    }



}
$('#catego').on('change', catego);

$( document ).ready(function() {
    catego();
});
</script>

這是我的ajax電話

 <script>
function showHint(str) {
    if (str.length == 0) { 
        document.getElementById("txtHintts").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHintts").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "/gethint?q=" + str, true);
        xmlhttp.send();
    }
}
</script>

Answer 1

刪除的內聯調用

<select  name='cars' id='cars' onchange="showHint(this.value)">

顯示/隱藏完成后，在js中調用此方法。 另外，將所有js事件保留在document.ready中。