Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
<select>
    <option>Select people</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
    <option value="6">Six</option>
</select>

<p>
<div id="names"></div>
</p>
</form>
<script>
$('select').on('change', function() {
  $("#names").html('')
  var count=$(this).val()
   
  var str='';
  for(var i=0; i<count; i++){
    str+='<input type="text"><br/><br/>'
  }
  
  $("#names").append(str)
  
});


</script>

页面刷新后或从下一页返回时，未保留附加的输入字段。我应该如何重新整理输入字段并在刷新时自动填充输入字段

Answer 1

正如我在评论中提到的，您可以执行类似的操作。

将值存储在持久性存储中的某个位置，例如localStorage，即使刷新也可以获取它。

$('select').on('change', function() {
    $("#names").html('')
    var count=$(this).val()
    
    var str='';

    if (localStorage.getItem("str") !== null) {
        str = localStorage.getItem("str");
    }

    for(var i=0; i<count; i++){
      str+='<input type="text"><br/><br/>'
    }
    
    $("#names").append(str)
    
    localStorage.setItem("str", str);
});

保留jQuery附加的输入

1 个答案: