javascript – 如何将listbox的值存储到数组中,然后使用它将其数据显示到另一个页面php中

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

    <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;
}

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

解决方法:

您可以创建全局变量并将数据保存在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 session：

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>