Question

（更新）这是查看源。

例如：你有一个Names列表..我必须使用foreach循环因为超过100个名字。一旦用户选择了名称，我就会在您点击按钮后出现电话号码。我需要选择的名字才能保持选中状态。

   <!DOCTYPE html> <!--Required in every html-->
<html>
<head>
    <!--Force browser to use latest version-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- link allows use of .css and script allows use of javaScript -->
    <!--<link rel="stylesheet" href="index.css"/>
    <script src="init.js"></script>-->
<script>
function doFirst(){

}
</script>
</head>
<body>
    <!--<button id='button'>Click me!</button>-->
    <!--  -->
<h1>    Friday 11-04-2016<br></h1>


    <form action='index.php' method='post'>
        Afternoon Shift Supervisor:
  <select name="name"> <!-- COMBO Box PLUS onchange="submit();return false; makes data appear on selection, refreshs page"-->
                                <!-- AMOUNT(PROID), THEN FILL WITH THE CONTENT(PRONAME)-->
                <option value="Declicious Apples!">Declicious Apples!</option>

                                <!-- AMOUNT(PROID), THEN FILL WITH THE CONTENT(PRONAME)-->
                <option value="Comfy">Comfy</option>

                                <!-- AMOUNT(PROID), THEN FILL WITH THE CONTENT(PRONAME)-->
                <option value="GREEN">GREEN</option>


        </select>
  <script>
var select = document.querySelector("name")[0];
var SelectOption = select.options[select.selectedIndex];
var lastSelected = localStorage.getItem('select');

if(lastSelected){
  select.value = lastSelected;
}/*
select.onchange = function (){
  lastSelected = select.options[select.selectedIndex].value;
  console.log(lastSelected);
  localStorage.setItem('select',lastSelected);
}
function updateSelection(which) {
  if (typeof localStorage != "undefined")
    localStorage.setItem("select", which.value);
}
window.onload = function () {
  if (typeof localStorage != "undefined")
    document.querySelector("#sel").value = localStorage["select"];
};*/
</script>

                    phone # :  Comfy
    <br>    On Call Supervisor:
        <select name="name2"> <!-- COMBO Box -->
                                <!-- AMOUNT(PROID IS VALUE..ASSOCIATIVE ARRAY), THEN FILL WITH THE CONTENT(PRONAME)-->
                <option value="Declicious Apples!">Apples</option>  <!-- ASSOCIATIVE ARRAY PRODDESC WILL BE OUTPUT-->
                                <!-- AMOUNT(PROID IS VALUE..ASSOCIATIVE ARRAY), THEN FILL WITH THE CONTENT(PRONAME)-->
                <option value="Comfy">Jeans</option>    <!-- ASSOCIATIVE ARRAY PRODDESC WILL BE OUTPUT-->
                                <!-- AMOUNT(PROID IS VALUE..ASSOCIATIVE ARRAY), THEN FILL WITH THE CONTENT(PRONAME)-->
                <option value="GREEN">VEGGIES</option>  <!-- ASSOCIATIVE ARRAY PRODDESC WILL BE OUTPUT-->
                        </select>

              <!--  TESTING TO VERIFY I GET VALUE OF WHAT WAS SELECTED WORKS!  -->
   Phone #: Declicious Apples! <br><input type='submit' id='click me' value='Submit'><br/>

我也尝试过（当页面刷新时都没有保存所选的值）：

  <script>
var select = document.querySelector("name");
var SelectOption = select.options[select.selectedIndex];
var lastSelected = localStorage.getItem('select');

if(lastSelected){
  select.value = lastSelected;
}
select.onchange = function (){
  lastSelected = select.options[select.selectedIndex].value;
  console.log(lastSelected);
 localStorage.setItem('select',lastSelected);
}
</script>
<form action='index.php' method='post'>
        Afternoon Shift Supervisor:
  <select name="name">              
<?php foreach($data as $i=>$rows): ?>

<option value="<?=$rows['PRODDESC']?>"><?=$rows['PRODDESC']?></option>

            <?php endforeach; ?>

        </select>
        <?php $name = $_POST["name"];?>
        phone # :  <?php echo $name; ?>
 <br><input type='submit' name='click me' value='Submit'><br/>
 </form>

Answer 1

不要在服务器端进行，而是使用客户端使其成为可能。

function updateSelection(which) {
  if (typeof localStorage != "undefined")
    localStorage.setItem("select", which.value);
}
window.onload = function () {
  if (typeof localStorage != "undefined")
    document.querySelector("#sel").value = localStorage["select"];
};

<select id="sel" onchange="updateSelection(this);">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
</select>

如果Stack Snippets是沙盒，请参阅JSBin的实时预览。

如何在html上实现本地存储？

1 个答案: