Question

下面的代码将在您选择下拉列表后显示带有文本字段用户名的div是，但是如果您单击提交它将隐藏div，我希望它在您单击提交谢谢后仍然显示div。

<script type="text/javascript"
window.onload=function(){
document.getElementById('user').addEventListener('change', function () {
    var style = this.value == 1 ? 'block' : 'none';
    document.getElementById('hidden_div').style.display = style;
});
}
</script>

<form method="post" action="">
Are You Ready:<br>
    <select id="user" name="form_select">
       <option value="0">No</option>
       <option value="1">Yes</option>
    </select>

<div id="hidden_div" style="display: none;">
    Username: <br>
    <input type="text" name="username"><br>
</div>

<br><input type="submit" name="submit" value="submit" />
</form>

Answer 1

提交强制页面刷新。

您可以向提交添加事件侦听器，并阻止默认行为。

document.querySelector('form').addEventListener('submit', function(e) {
  e = e || event;

  e.preventDefault();

  // Do Something
});

Answer 2

使用jQuery：

＆＃13;

$(document).ready(function() {
    $("#user").change(function() {
        var style = $(this).val() == 1 ? 'block' : 'none';
        $("#hidden_div").css("display", style);
    });
    
    $('form').submit(function(e) {
        e.preventDefault();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  Are You Ready:<br>
  <select id="user" name="form_select">
      <option value="0">No</option>
      <option value="1">Yes</option>
  </select>

  <div id="hidden_div" style="display: none;">
      Username: <br>
      <input type="text" name="username"><br>
  </div>
  <br>
  
  <input type="submit" name="submit" value="submit" />
</form>

＆＃13;

在显示下拉菜单和按钮提交后保持div

2 个答案: