如何将列表框的值存储到数组中，然后使用它将其数据显示到另一个页面 php

Question

我需要有关如何存储插入到列表框中的数据的帮助。现在我有以下创建列表的代码。

    <select name = "lstTerminals" size = "5" id="lstTerminals" multiple="multiple" style="width:200px;">    

    </select>

如您所见，它根本没有选项或值。为了填写列表，我有一个按钮，它可以根据从文本字段输入的内容向其中添加值。以下是用户可以放置文本的文本字段

<input id="txtTerminal" type="text" name="txtTerminal" style="width:115px;"/>

下面的代码是按钮

    <input class = "buttonDesign" id="btnAddTerminal" name ="btnAddTerminal" type="button" onclick = "javaScript:addTerminal();"
        value="Add Terminal" style="width:110px; height:25px"/>

请注意，它有一个 onclick 方法，当单击该方法时，它会将文本输入中的文本插入到我的列表框中。以下 onclick javaScript:addTerminal() 有 javascript 代码：

function addTerminal() {
    var terminal = document.getElementById('txtTerminal');
    var terminals = document.getElementById('lstTerminals');
    var values = new Array();
    var option = document.createElement("option");

    option.value = terminal.value;
    option.text = terminal.value;

    terminals.add(option);

    return true;
}

列表框填满文本后，我应该能够单独获取这些文本并移动到另一个页面以某种方式显示每个文本。我现在的问题是如何将所有这些值（不选择）存储在列表框中，并可能将其存储到数组中。完成后，如何调用该数组并将其用于另一个页面以显示上一页中的值？

Answer 1

您可以创建一个全局变量并将数据保存在 addTerminal 函数中 然后您可以将其发布到 php 或将其存储在客户端本地存储中 取决于浏览器是否支持 localStorage。

var selectedTerminals = [];

function addTerminal() {
    var terminal = document.getElementById('txtTerminal');
    var terminals = document.getElementById('lstTerminals');
    var values = new Array();
    var option = document.createElement("option");

    option.value = terminal.value;
    option.text = terminal.value;

    terminals.add(option);
    savedData = {'value':terminal.value,'text':terminal.text};

    selectedTerminals.push(savedData);
    return true;
}

....

当您转到该事件中的第二页时，您应该有一些事件，您必须调用一些决定数据存储位置的 js 函数 localStorage 或 PHP 会话：

function saveBeforeNavigation(){

 if (typeof (Storage) !== 'undefined') {
    // use local storage and save selected terminals in it

  localStorage.setItem('selectedTerminals', JSON.stringify(selectedTerminals));

 } else {
    // post the data to the server and store it to DB / session / file
    $.post('secondPage.php', {'selectedTerminals': selectedTerminals},function(result){if(result.status){alert('saved in session')}else{alert('was not saved in session')}},'json');
 }
}

secondPage.php

<?php
session_start();
// saving posted selectedTerminals
if (isset($_POST['selectedTerminals'])) {
  $_SESSION['selectedTerminals'] = $_POST['selectedTerminals'];
  echo json_encode(array('status' => 1));
  die();
}

// when not posted here you get the selectedTerminal when nav executed
if (isset($_SESSION['selectedTerminals'])) {
  echo '<script type="text/javascript">var selectedTerminals = JSON.parse(\'' . json_encode($_SESSION['selectedTerminals']) . '\')</script>';
}
?>

<script type="text/javascript">
// get the selectedTerminals from the localStorage in case its exists
if(typeof(Storage) !== 'undefined'){
    selectedTerminals = JSON.parse(localStorage.getItem('selectedTerminals'))
}

</script>