單擊按鈕如何更改下拉菜單的內容？

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