Question

我想在不提交表单的情况下使用用户选择的选项值。这是我的HTML代码

Combo Box<br>
<select name="select1">
<option value="IVP" selected>IVP</option>
<option value="SURTEK">SURTEK</option>
<option value="GUITARTUNER">GUITARTUNER</option>
<option value="OTHER">OTHER</option>
</select>

我想将选定的选项值转换为php变量，以便根据选项值显示一组新数据。感谢

Answer 1

正如其他人建议的那样，你应该使用AJAX。我建议查看AJAX调用的javascript / Jquery示例。

我想你想根据用户选择的选项修改网页的一部分，最好的方法是使用一个单独的PHP脚本来接收所选的选项（在javascript / jQuery中捕获）并返回新的您要显示的HTML。

例如在Jquery中获取所选选项：

var selected_option_value=$("#select1 option:selected").val();

同样在Jquery中进行AJAX调用，使用POST传递值：

  $.post("script_that_receives_value.php", {option_value: selected_option_value},
      function(data){ //this will be executed once the `script_that_receives_value.php` ends its execution, `data` contains everything said script echoed.
          $("#place_where_you_want_the_new_html").html(data);
      }
  );

希望这有帮助！

编辑：让我们为上面的例子提供更多详细信息：

假设您有一个index.html页面，其中您的问题中提供了<select name="select1">：

第一步是在有人选择其中一个选项时链接一个事件，如何执行此操作：

1-第一种方式：

<select name='select1' id='select1' onchange='load_new_content()'>

这样，当有人更改<select>列表的选定值时，将执行javascript函数load_new_content()。请注意我已将id='select1'添加到标记中，这用于在javascript / JQuery中搜索此元素，如果需要在javascript / JQuery中使用该标记，则应始终使用id属性。

2-第二种方式，使用JQuery链接事件：

要执行此操作，您应该在index.html的<script>内添加<head>标记。在此<script>标记内，您应该：

$(document).ready(function(){
      // everything here will be executed once index.html has finished loading, so at the start when the user is yet to do anything.
      $("#select1").change(load_new_content()); //this translates to: "when the element with id='select1' changes its value execute load_new_content() function"
});

无论您想要使用哪个选项，现在都需要此load_new_content()功能。它也应该在<script>标记的<head>标记内声明，就像$（document）.ready函数一样。

function load_new_content(){
     var selected_option_value=$("#select1 option:selected").val(); //get the value of the current selected option.

     $.post("script_that_receives_value.php", {option_value: selected_option_value},
         function(data){ //this will be executed once the `script_that_receives_value.php` ends its execution, `data` contains everything said script echoed.
              $("#place_where_you_want_the_new_html").html(data);
              alert(data); //just to see what it returns
         }
     );
}

现在唯一剩下的就是script_that_receives_value.php：

<?php
     $selected_option=$_POST['option_value'];

     //Do what you need with this value, then echo what you want to be returned.

     echo "you have selected the option with value=$selected_option";
?>

Answer 2

您不能在php变量中获取选项值，而不会发出http请求，因为所选值位于客户端，而php - 位于服务器中。

您可以使用ajax，但它仍在提交表单。如果您不想对服务器执行查询，则必须加载客户端中的所有数据并使用JavaScript来管理它

Answer 3

使用AJAX，同时在下拉列表中选择一个选项，触发jQuery函数并通过AJAX将值发送到服务器页面

HTML页面：

<html>
<head>
<script>
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>

</body>
</html>

PHP页面（getuser.php）：

<?php
$q=$_GET["q"];

$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("ajax_demo", $con);

$sql="SELECT * FROM user WHERE id = '".$q."'";

$result = mysql_query($sql);

echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";

while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['FirstName'] . "</td>";
  echo "<td>" . $row['LastName'] . "</td>";
  echo "<td>" . $row['Age'] . "</td>";
  echo "<td>" . $row['Hometown'] . "</td>";
  echo "<td>" . $row['Job'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysql_close($con);
?>

参考：http://www.w3schools.com/php/php_ajax_database.asp

Answer 4

如果您正在寻找动态Web内容，Ajax是最佳选择

获取选项值而不提交表单

4 个答案: