刷新后留在同一页

我有一个页面包含一个表单，有一个关于输入类型选择的JavaScript侦听器，事件是onchange，取决于从选择中选择的选项该页面将显示一个输入块div），我使用隐藏和显示来显示或隐藏一个HTML元素块，其中一个div（div 2）有一个输入类型也可以通过带有ajax调用的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>

来源

2016-02-17 Guns_Roses

删除的

内嵌调用

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

显示/隐藏完成后，在js中调用此方法。另外，在document.ready中保留所有js事件。

来源

2016-02-17 13:02:57 Peeje

刷新后留在同一页

回答

相关问题