2

我正在尝试填充网页上的列表框，我希望列表框开始为空白。单击按钮后，应填充列表框。我下面的代码会自动填充列表框，但我宁愿让按钮来做。

<?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>
4

3 回答 3

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>

在此处阅读有关添加选项以从 java 脚本中选择元素的更多信息

于 2013-01-10T23:47:50.240 回答
1

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

它不安全，任何人都可以发布 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

于 2013-01-10T23:49:45.677 回答
1

我会：将数据作为一些准备好的但不可见的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()功能的按钮。在该函数内部，它使用在 url 中设置的 ajax 标志对同一页面进行基于 jQuery 的 ajax 调用，并将结果（即 json）评估为有效的 javascript 数组。然后将该数组创建到选项中并加载到 RestName SELECT 元素中。

最后的饼干？无论如何，您都可以将数据作为选项打印到选择中，就像前面描述的答案一样。然后，在 displayItems() 函数中，在从 jQuery/ajax 调用加载它之前清除选择。这样，用户将从一开始就看到数据，并且只会使用数据库中的最新数据对其进行更新。干净，一页。

于 2013-01-11T00:21:28.343 回答