Question

我想说的是，当点击一个按钮时，下拉菜单中的某些值会出现在同一文档的后面。

例如，如果有一个名为Honda的按钮并且单击它，它会将下拉菜单中的内容更改为汽车的模型详细信息。

怎么可能这样做？

CONTEXT：启用PHP的服务器上的网页

提前致谢！

Answer 1

我建议最简单的解决方案是JavaScript。似乎过载使用框架来完成这么简单的任务：

<html>
<head><title>JS example</title></head>
<body>
<script type="text/javascript"><!--

  //
  var opt_one = new Array('blue', 'green', 'red');
  var opt_two = new Array('plaid', 'paisley', 'stripes');

  //
  function updateTarget() {
    var f = document.myform;
    var which_r = null;
    if (f) {

      // first option selected? ("One")
      if (f.trigger.value == '1') {
        which_r = opt_one;

      // ...or, second option selected? ("Two")
      } else if (f.trigger.value == '2') {
        which_r = opt_two;

      // no known option, hide the secondary popup
      } else {
        f.target.style.display = 'none';
      }

      // did we find secondary options for the selection?
      if (which_r) {

        // reset/clear the target pop-up
        f.target.innerHTML = '';

        // add each option
        for (var opt in which_r) {
          f.target.innerHTML += '<option>' + which_r[opt] + '</option>';
        }

        // display the secondary pop-up
        f.target.style.display = 'inline';
      }
    }
  } // updateTarget()

//-->
</script>
<form name="myform" action="#">
  <select name="trigger" onchange="updateTarget();">
    <option>Select one...</option>
    <option>-</option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
  <select name="target" style="display:none;">
  </select>
</form>
</body>
</html>

Answer 2

你需要使用AJAX，而jQuery内置的功能可以使这更简单。

对于按钮本身，您可以使用onclick来启动请求。

<input type="button" onclick="carRequest('honda');" />

Answer 3

您可以使用jquery执行此操作，使用一个PHP后端脚本根据您单击的按钮填充选择框的值。

一些简单的HTML开头：

<form action="script.php">
  <button id="Honda" onClick="loadModelsForMake('Honda');">Honda</button>
  <button id="Toyota" onClick="loadModelsForMake('Toyota');">Toyota</button>

  <select name="models" id="models">
    <option value="">Please Select A Make</option>
  </select>
</form>

然后，您需要设置PHP脚本，以便在给定make的情况下为您提供适当的值列表。最好在后端执行此操作，这样您就不会在javascript代码中硬编码。创建一个名为models.php的文件。它将查找查询字符串中定义的“make”变量，并返回该make的JSON模型数组。如果你想要的话，你可以将它连接到一个模型的数据库，这样你就不会很难编码：

<?php
$models = array();
if ($_GET['make'] == 'Toyota') {
  models[] = array(id: 0, name: 'Matrix'});
  models[] = array(id: 1, name: 'Yaris'});
} else if ($_GET['make'] == 'Honda') {
  models[] = array(id: 0, name: 'Civic'});
  models[] = array(id: 1, name: 'Pilot'});
}
echo json_encode($models);
?>

最后，您需要JQuery将它们连接在一起。将此脚本块添加到您的页面：

<script type="text/javascript" charset="utf-8">
function loadModelsForMake(carMake) {
    $.getJSON("/models.php", {make: carMake, ajax: 'true'}, function(json){
      var options = '';
      for (var i = 0; i < json.length; i++) {
        options += '<option value="' + json[i].id+ '">' + json[i].name + '</option>';
      }
      $("models").html(options);
    })
}
</script>

当然要确保在页面中包含基本jQuery脚本;）

如何单击按钮更改下拉菜单的内容？

3 个答案: