javascript - 从 onchange 事件创建一个全局变量

Question

如何从 onchange 事件创建全局变量，以便 js 页面中的每个函数都可以使用该变量的值？任何人都可以提供工作示例代码。

onchange="showTable()" 来自 ma​​in.php 的事件:

<?php
    $linkID = @ mysql_connect("localhost", "root", "Newpass123#") or die("Could not connect to MySQL server");
    @ mysql_select_db("seatmapping") or die("Could not select database");
    $dbname = "seatmapping";
    $sql = "SHOW TABLES FROM $dbname where tables_in_seatmapping!='userauth'";
    $result = mysql_query($sql);
    $tableNames= array();

    while ($row = mysql_fetch_row($result)) {
        $tableNames[] = $row[0];
    }

    echo '<select name="tables" id="tables" onchange="showTable(this.value)">'; 
    echo '<option class="placeholder" selected disabled>Layouts</option>';
    foreach ($tableNames as $name){
        echo '<option value="'. $name.'">'.$name.'</option>';
    }
    echo '</select>';
?>

onclick="showAvailable()" 事件也来自 ma​​in.php:

<div class="sliderContainer">

    <div id="slider">
        <a class="ui-slider-handle" href="#">Start</a>
        <a class="ui-slider-handle" href="#">End</a>
    </div>

    <p>
    <a id="timer"><span class="slider-time">10:00 AM</span> to <span class="slider-time2">12:00 PM</span></a>

    <a href="#" id="checkAvailable" onclick="showAvailable()">Avail</a>
    <a href="#" id="resetAvailable" onclick="resetAvailable()">Reset</a></p>

</div>

我在 .js 页面中的函数:

var tableName;

function showTable(tableName){
  if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
  }
  else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("showLayout").innerHTML=xmlhttp.responseText;
      tableName = xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","seatmap.php?tableName="+tableName,true);
  xmlhttp.send();
}

function showAvailable(){
  var startShift = $('#slider').slider("values", 0);
  var endShift = $('#slider').slider("values", 1);

  if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
  }
  else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("showLayout").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","seatmap.php?startShift="+startShift+"&endShift="+endShift+"&tableName="+tableName,true);
  xmlhttp.send();
}

这里是 seatmap.php 的片段，它太长了，但我对 showAvailable 和 showTable 使用 $tableName。我还在查询中使用它:

<?php

$startSlider=intval($_GET['startShift']);
$endSlider=intval($_GET['endShift']);
$tableName = strval($_GET['tableName']);

$linkID = @ mysql_connect("localhost", "root", "Newpass123#") or die("Could not connect to MySQL server");
@ mysql_select_db("seatmapping") or die("Could not select database");

/* Create and execute query. */
$query = "SELECT rowId,columnId,status,name,seatid,startShift,endShift from $tableName group by seatid order by rowId, columnId desc";
$result = mysql_query($query);
$prevRowId = null;
$seatColor = null;
$tableRow = false;

//echo $result;
echo $tableName;

我想要的是如何使 onchange=showTable(this.value) 中的值成为全局变量，以便我可以在函数 showAvailable 中使用它并将其传递到 php 页面。任何形式的帮助表示赞赏。预先感谢您。

Answer 1

在函数showTable()之前创建变量，例如var global_var;，然后在showTable()中赋值，然后就可以在showAvailable()中使用了，但是记住检查它是否不为空。

编辑:你的 .js 现在应该是这样的(你覆盖了一些变量):

var tableName;

function showTable(localTable){
  if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
  }
  else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("showLayout").innerHTML=xmlhttp.responseText;
      tableName = localTable;
    }
  }
  xmlhttp.open("GET","seatmap.php?tableName="+localTable,true);
  xmlhttp.send();
}

function showAvailable(){
  var startShift = $('#slider').slider("values", 0);
  var endShift = $('#slider').slider("values", 1);

  if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
  }
  else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("showLayout").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","seatmap.php?startShift="+startShift+"&endShift="+endShift+"&tableName="+tableName,true);
  xmlhttp.send();
}