如何使用javascript填充HTML選擇列表

Question

我對HTML和JavaScript很新穎。我知道這個代碼已經在互聯網上存在，但我不能讓它爲我工作。我在這個問題上停留了2-3天。如果你能幫助我，我會很高興。

這是我的問題 我想根據所選條目optPostAppliedFor填充optCategory選擇列表。爲此，當我點擊optPostAppliedFor列表時，我調用了函數change_categoriees（key）。該代碼是在這裏如下

<tr> 
    <td width="40%" align="right" nowrap> 
     <strong> 
      Post Applied for<span class="text11red">*</span> : 
     </strong> 
    </td> 
    <td width="60%"> 
     <select name="optPostAppliedFor" class="flat" onclick="change_categories(0);" />&nbsp;&nbsp;&nbsp; 
      <option value="">--Select--</option> 
      <?php 
      foreach($App['post_applied_for'] as $key => $val){ 
       echo '<option value="'.($key).'">'.$val.'</option>'; 
      } 
      ?> 
     </select> 
    </td> 
</tr> 

這裏是的optPostAppliedFor默認enteries PHP代碼和optCategory

$App['post_applied_for'] = array(
    'Lecturer'   => 'Lecturer', 
    'Business Analyst' => 'Business Analyst', 
    'Deepender good' => 'Deepender good' 
); 
$App['category'] = array(
    'Category1' => 'Category1', 
    'Category2' => 'Category2', 
    'Category3' => 'Category3' 
); 

請告訴我，我怎樣才能使這個功能，讓我的目的就達到了。我試過這個，但都是徒勞的。

function change_categoriees(key) { 
    alert('asdasd'); 

    var z = document.getElementById('optCategory'); 
    var x = document.getElementById('optPostAppliedFor'); 
    var y = document.createElement('option'); 

    var display = x.options[x.selectedIndex].text; 
    var option = x.options[x.selectedIndex].value; 

    y.text = display; 
    y.value = option; 

    try { 
     z.add(y,null); 
    } catch(ex) { 
     z.add(y); 
    } 

    z.options[0].text = '* '+(z.length-1)+' selected *'; 
} 

Answer 1

第一個問題，在你的PHP代碼，你非正常關閉選擇標籤，這樣，

<select ... /> 
    ... 
</select> 

這可能會導致一些錯誤。它應該是這樣的，沒有額外/，

<select ... > 
    ... 
</select> 

作爲另一個問題，拼寫你的函數調用這個樣子，

onclick="change_categories(0);" 

但你拼錯了你的函數名這樣的，

function change_categoriees(key) {...} 

注意「分類」中的額外「e」。所以你實際上並沒有正確地調用這個函數。

看起來像其他人也有一些答案，所以我只是通過提供一些開發工具和文檔的建議完成。對於開發工具，Firefox Firebug非常出色，它可以讓你調試CSS，HTML和JavaScript。我也聽說過Chrome中的開發工具。事實上，所有最新的瀏覽器版本都有某種開發工具，而且它們都很不錯。

接下來，the Mozilla docs是一個很好的網頁開發資源。您可能還有興趣查看在w3fools.com處提及的資源。

另外，將來在Stack Overflow上共享代碼時，您應該考慮與jsFiddle共享一個實例。

哦，等等，在我忘記之前，您還應該使用文本編輯器或an IDE，它可以爲您實現語法高亮顯示，甚至可能還有語法更正。我在Windows上使用了一個名爲Notepad++的簡單文本編輯器，不過還有很多其他的。

Answer 2

可能是您在尋找AJAX方法嗎？例如。你發送請求給你的一些PHP文件，使用GET或POST變量作爲你的key（用戶在optPostAppliedFor中選擇）和PHP腳本echo'es所需的結果，所以JS可以使用它。

例如，使用jQuery這應該是這樣的：

$("select[name=optCategory]").load("myUberScript.php", { key: $("select[name=optPostAppliedFor]").attr("selected") }); 

myUberScript.php：

<?php 
    $key = $_POST['key']; 

    if (isset($key)) 
    { 
    if ($key == 'moo') 
     echo "<option>moo</option>"; else 
    if ($key == 'foo') 
     echo "<option>foo</option>"; 
    } 
?> 

我認爲這將是最好的方式，但我真的不確定用我的.attr("selected")選擇器。我建議你閱讀一些'回合AJAX和jQuery - 這些都是非常有用的網頁開發時=）

那麼，這個JS做什麼？它發現你的select標籤名稱爲optPostAppliedFor，得到所有的「選擇」的項目（一定要驗證代碼 - 我不知道這件事），發送POST請求myUberScript.php傳球，作爲$_POST['key']參數值，得到響應，找到名爲optCategory的div，並將其內部HTML代碼設置爲PHP的響應。相當不錯，是吧？ =）

我推薦這種方式，因爲用戶獲取javascript內的所有內部數據並不總是好事 - 用戶可以看到這些數據，並且如果有大量數據，頁面會加載得很慢。其次：您可以隨時管理/編輯/更新/修改（選擇正確的）您的PHP代碼。第三：PHP代碼具有更多用於安全驗證用戶數據和更多功能的功能。但是有一個很大的缺點：如果用戶在他的瀏覽器中禁用了JS支持，那麼你將無法做到這一點。 注意：這是當用戶禁用JS一種非常罕見的情況下，=）

Answer 3

我真的不知道，但是......

在change_categoriees方法這兩條線看問題：

var z = document.getElementById('optCategory'); 
var x = document.getElementById('optPostAppliedFor'); 

對於這些語句返回一定的價值，你的HTML需要有與名稱optCategory和optPostAppliedForid屬性：

<select id="optPostAppliedFor"> 

另請注意，PHP代碼在服務器的後端運行。瀏覽器中運行的JavaScript無法直接調用PHP。

Answer 4

如果我正確解釋你的代碼，你確實有一個小問題：你在PHP代碼中放置了變量，你希望客戶端（瀏覽器）使用它。這不是它的工作方式。 PHP中的變量只存儲在服務器端。所以Javascript（在瀏覽器端）不能以任何方式使用它，如果你只將它們存儲爲變量：它們將在服務器內存中，而不在客戶端上。這裏有兩種解決方案：

1°）您將要在PHP生成的網頁中使用的變量。例如，您可以隱藏字段，然後「取消隱藏」相關字段。但是如果你有很多變數，這不是很實際。您可以使用AJAX解決方案：基本上，這個想法是通過Javascript調用一個將發回信息（格式爲純文本，XML或JSON）的PHP腳本。在這裏，當用戶點擊第一個列表時，您發送一個請求（POST或GET），您將通知服務器關於用戶的選擇。例如，您將要求提供與「業務分析員」選擇相關的類別。 PHP腳本我們將分析「帖子申請」並相應地發送類別列表的內容。由於一切都是通過PHP &完成的，因此頁面在這段時間內不會被重新加載，所以它相對流暢。

我會推薦使用Javascript庫來使事情更容易一些。 JQuery是最受歡迎的選擇之一，你會在網上找到很多幫助和例子。