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

我想讓它在單擊一個按鈕時，在同一個文檔的後面出現一個下拉菜單中的某些值。如何點擊按鈕更改下拉菜單的內容？

例如，如果有一個名爲Honda的按鈕並點擊它，它會將下拉菜單中的內容更改爲汽車的模型細節。

怎麼可能做到這一點？

背景：啓用PHP的服務器上的網頁

在此先感謝！

來源

2009-07-15 ron8

我們可以有一些上下文嗎？這是一個網頁，桌面應用程序？ – 2009-07-15 14:33:34

它是在一個網頁與PHP和JavaScript啓用服務器。謝謝！ – ron8 2009-07-15 14:36:23

我建議最簡單的辦法是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>

來源

2009-07-15 15:08:36 Nathan

你需要使用AJAX，而jQuery內置的函數可以使這個更簡單。

至於按鈕本身，您可以使用onclick來開始請求。

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

來源

2009-07-15 14:50:43 Juddling

你可以使用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腳本設置，讓您給出選擇的化妝值的相應的列表。最好在後端執行此操作，以免在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腳本;）

來源

2009-07-15 15:05:21 Parrots

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

回答

相關問題