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

Question

我要确保单击按钮时，下拉菜单中的某些值稍后会出现在同一文档中。

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

这怎么可能呢？

上下文：启用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数组。 如果您愿意，可以将其连接到make的模型数据库中，这样就不必对代码进行硬编码了：

<?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 个解决方案

解决方案1
2 已采纳 2009-07-15 15:08:36

解决方案2
1 2009-07-15 14:50:43

解决方案3
1 2009-07-15 15:05:21

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

问题描述

3 个解决方案

解决方案1 2 已采纳 2009-07-15 15:08:36

解决方案2 1 2009-07-15 14:50:43

解决方案3 1 2009-07-15 15:05:21

解决方案1
2 已采纳 2009-07-15 15:08:36

解决方案2
1 2009-07-15 14:50:43

解决方案3
1 2009-07-15 15:05:21