Question

我正在尝试填充网页上的列表框，我希望列表框开始为空。单击按钮后，列表框应填充。我的代码会自动填充列表框，但我宁愿让按钮执行此操作。

<?php 
$dbc = mysql_connect('','','') 
     or die('Error connecting to MySQL server.'); 

mysql_select_db('MyDB'); 

$result = mysql_query("select * from tblRestaurants order by RestName ASC"); 
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>SEARCH</title> 


 </head> 

<body> 
<form method="post" action="1004mcout.php">



<p><center>SEARCH</CENTER></P> 
<select name="RestName"> 
<?php 
 while ($nt= mysql_fetch_assoc($result))  
{ 
     echo '<option value="' . $nt['RestID'] . '">' . $nt['RestName'] . '</option>'; 
}  
?> 
</select>

<p> SPACE</p> 

<p>Click "SUBMIT" to display the calculation results</p> 

<input type="submit" name="Submit" value="Submit" /> 

<br /> 

</form> 

</body> 

</html>

Answer 1

<?php 
$dbc = mysql_connect('','','') 
     or die('Error connecting to MySQL server.'); 

mysql_select_db('MyDB'); 

$result = mysql_query("select * from tblRestaurants order by RestName ASC"); 
?>

<html>
<head>
<script>
function displayResult()
{
   var x =document.getElementById("RestName");
   var option;

   <?php 
 while ($nt= mysql_fetch_assoc($result))  
 {
       echo 'option=document.createElement("option");' .
            'option.value=' . $nt['RestID'] . ';' . 
            'option.text=' . $nt['RestName'] . ';' .
            'x.add(option,null);';
 }  
  ?>
}
</script>
</head>

<body>

  <select name="RestName"> 
  </select>

  <button type="button" onclick="displayResult()">Insert options</button>

  </body>
</html>

Read more about adding options to select element from java script here

Answer 2

这个简单的方法怎么样，这就是你的意思，

它不安全，任何人都可以发布show = yes但我认为你只是喜欢用户只需点击并查看结果

<select name="RestName"> 
<?php 

// if show=yes
if ($_POST['show'] == "yes"){

$dbc = mysql_connect('','','') 
 or die('Error connecting to MySQL server.'); 

mysql_select_db('MyDB'); 

$result = mysql_query("select * from tblRestaurants order by RestName ASC"); 

 while ($nt= mysql_fetch_assoc($result))  
{ 
     echo '<option value="' . $nt['RestID'] . '">' . $nt['RestName'] . '</option>'; 
}
}
?> 
</select>

<form method="post" action="#">
<input type="hidden" name="show" value="yes" />
<input type="submit" name="Submit" value="Submit" /> 
</form>

你也可以简单地使用隐藏的 div 来隐藏列表框，并为按钮提供一个onclick动作来显示div，在这里了解如何：https://stackoverflow.com/a/10859950/1549838

Answer 3

我要么：将数据预加载到页面中作为一些准备但不可见的html列表（可能有点n00b），或者将数据保存为javascript数组，并且函数会将其加载到页面中（更好），或者执行对同一页面的ajax调用（为简单起见）（可能最好，在页面启动后让您选择打开更新的数据）。

Ajax路由必须使用jQuery（将this_page.php更改为调用此页面）：

<?php


while ($nt= mysql_fetch_assoc($result))
    $arrData[] = $nt;

//If you want to test without DB, uncomment this, and comment previous
/*$arrData = array(
        array('RestID' => "1", 'RestName' => "Mike"),
        array('RestID' => "2", 'RestName' => "Sebastian"),
        array('RestID' => "3", 'RestName' => "Shitter")
        );*/

if(isset($_GET["ajax"]))
{
    echo json_encode($arrData);
    die();
}
?>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
function displayItems()
{
    $.getJSON("this_page.php?ajax=true", function(data) {
        $.each(data, function(index, objRecord) {
            var option=document.createElement("option");
            option.value=objRecord.RestID;
            option.text=objRecord.RestName;
            $("#RestName").append('<option value="' + objRecord.RestID + '">' + objRecord.RestName + '</option>');
        });
    });

}
    </script>
    <title>SEARCH</title>
</head>
<body>
    <form method="post" action="1004mcout.php">
        <p><center>SEARCH</CENTER></P>
        <select id="RestName"></select>
        <p> SPACE</p> 
        <p>Click "SUBMIT" to display the calculation results</p> 
        <button type="button" onclick="javascript:displayItems();">Insert options</button>
        <br /> 
    </form> 
</body> 
</html>

基本上，它做什么，收集数据，检查url中是否有对ajax数据的请求，如果没有，则打印页面的其余部分（使用空选择）。如果url中有ajax标志，则php会将数据编码为json，打印并停止。当用户收到一个空的选择页面时，它会点击将触发displayItems()功能的按钮。在该函数内部，它对同一页面进行基于jQuery的ajax调用，并在url中设置ajax标志，并将结果（即json）计算为有效的javascript数组。然后将该数组创建为选项并加载到RestName SELECT元素中。

最终的cookie？您可以将数据作为选项打印到选择中，就像前面描述的答案一样。然后，在displayItems（）函数内部，在从jQuery / ajax调用加载之前清除select。这样，用户将从一开始就看到数据，并且只会使用来自数据库的最新数据来更新数据。清洁，全部在一页。

单击按钮填充列表框

3 个答案: