根據下拉菜單更改HTML選擇內容

我有一個選擇項目，裏面填滿了文件列表。這個文件列表存儲在一個php變量中。根據下拉菜單更改HTML選擇內容

我有另一個目錄中的另一個文件列表，存儲在另一個變量。

我有一個下拉菜單，有2個選項。當我更改下拉菜單時，我希望選擇中的項目更改爲與所選項目關聯的文件列表。

例如，我的下拉包含：

其它圖片
人民

我有2個變量，$misc和$people。

當選擇Misc時，我希望選擇包含$misc中列出的所有圖像，並且當選擇人員選項時，我希望選擇包含$people中列出的所有選項。

至於循環通過PHP來生成所有的項目是好的，我不明白的是如何做的JavaScript部分？

謝謝，並對可憐的措辭表示歉意。

來源

2011-01-27 AndrewC

試試這個代碼。

PHP：

<?php 
    $miscArray = array("misc1", "misc2", "misc3"); 
    $misc = implode(", ", $miscArray); 
    $peopleArray = array("people1", "people2", "people3"); 
    $people = implode(", ", $peopleArray); 
?>

HTML：

<form action="#"> 
    <select id="fileCat"> 
     <option id="misc">Misc</option> 
     <option id="miscData" style="display:none"><?php echo $misc ?></option> 
     <option id="people">People</option> 
     <option id="peopleData" style="display:none"><?php echo $people ?></option> 
    </select> 
    <select id="files"></select> 
</form>

JS：

init(); 

function init() 
{ 
    addListeners(); 
} 

function addListeners() 
{ 
    document.getElementById("fileCat").onchange = fillSelect; 
} 

function fillSelect() 
{ 
    var fileCat = document.getElementById("fileCat"); 
    var imageFiles; 
    switch(fileCat.options[fileCat.selectedIndex].id) 
    { 
     case "misc": 
     imageFiles = document.getElementById("miscData").innerHTML.split(", "); 
     break;  
     case "people": 
     imageFiles = document.getElementById("peopleData").innerHTML.split(", "); 
     break; 
    } 
    var parent = document.getElementById("files"); 
    parent.innerHTML = ""; 
    if(imageFiles.length) 
    { 
     for(var i=0;i<imageFiles.length;i++) 
     { 
      var option = document.createElement("option"); 
      //populate option with corresponding image text 
      option.innerHTML = imageFiles[i]; 
      parent.appendChild(option); 
     } 
    } 
}

我嘲笑了PHP中的一些數據，然後呼應它變成一個隱藏<option>標籤爲每個類別。然後，根據所選選項的ID，使用大小寫/開關抓取數據。

來源

2011-01-27 17:41:28

可以給我們提供一些代碼嗎？這是很沉重它完全寫的什麼:)

UPDATE：

那麼你怎麼樣嘗試通過使用jQuery以下（或類似）：

<select id="foo"> 
    <option class="misc">MISC</option> 
    <option class="misc">MISC2</option> 
    <option class="people">People1</option> 
</select> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('option.misc').click(function(){ 
      $('#foo').html('<option class="misc">MISC</option> 
      <option class="misc">MISC2</option>'); 
     }); 
    }); 
</script>

來源

2011-01-27 16:39:24

嗯，我想最主要的是我知道如何清除選擇中的當前選項，但我無法從JavaScript變量重新填充它的JavaScript？代碼被嵌入到很多其他代碼中，以便將其挖掘並編輯，以便在此處理解可能需要一段時間！ :) – AndrewC 2011-01-27 16:41:54

我認爲像this會工作。您可以設置下拉框的onchange屬性來調用該函數。你將需要一個URL來返回你想在JSON中使用的選項（在這個例子中是selectMenus.php）。您需要兩個不同的網址或一個參數來指示設置了哪個選項。

來源

2011-01-27 16:48:47 JeffB

PHP是服務器端。 JavaScript是客戶端。你有兩個選擇（1）發送一個XmlHTTP請求回你的服務器來拉取選項並更新選擇列表，或者（2）將值發送到頁面初始渲染中的隱藏字段並從那裏獲取值。

來源

2011-01-27 17:11:54 smartcaveman

根據下拉菜單更改HTML選擇內容

回答

相關問題