2014-02-07 112 views
0

所以我有一個PHP數組,我是JSON編碼和交給一些JQuery。基本上我使用陣列中的信息根據另一個下拉列表的值來動態更改一個下拉列表的內容。我遇到了JQuery的一些問題,雖然JQuery對我來說很新。迭代通過php數組在jquery

首先我的PHP:

<?php 
$sql = mysql_query("SELECT * FROM menu") or die(mysql_error()); 

$menuItems = array(); 
$x   = 0; 
while($row = mysql_fetch_object($sql)) 
{ 
    $menuItems[$x]['ID']  = $row->ID; 
    $menuItems[$x]['parent'] = $row->parent; 
    $menuItems[$x]['name']  = $row->Name; 
    $menuItems[$x]['header'] = $row->header; 
    $menuItems[$x]['Sort']  = $row->sort; 

    $x++; 
} 
?> 

此代碼返回〜30個的菜單項的數組。

然後我的JQuery:

<script> 
    var menuItems = <?php echo json_encode($menuItems); ?>; 

    $('#dropdown1').change(function(){ 
      if($('#dropdown1').val() == 0){ 
       $('dropdown2').children().remove().end() 

       for(var x = 0; x < menuItems.length; x++){ 
        if(menuItems[x]['header'] == 1){ 
         $('#dropdown2').options[menuItems[x]['sort']] = new Option(menuItems[x]['name'], menuItems[x]['sort']); 
        } 
       } 
      } 
     }); 
</script> 

我想這個做的是當dropdown1改變,dropdown2的選項去掉,然後用從陣列具體的事情再增殖。

當dropdown1更改但重新填充不起作用時,此代碼確實會刪除dropdown2的選項。從我在測試中可以看出的情況來看,循環遍歷數組的循環只輸入一次,儘管它們大約有30個項目,我認爲這是我的主要問題。

我在這裏做錯了什麼?

+0

當頁面被創建時,PHP在服務器上運行。 'menuItems'的內容不會動態改變。您需要使用AJAX從服務器獲取一組新的菜單項。 – Barmar

+1

'$('#dropdown2')。options []'do做什麼?你有沒有告訴我們的插件,或者你是否將jQuery對象與本地DOM元素相混淆。 – adeneo

+0

1.這是一個javascript對象,而不是「php數組」。 2.你似乎誤解了「jQuery」是javascript的框架 - 而不是另一種語言。你可以沒有jQuery的JavaScript,但你不能沒有JavaScript的jQuery。你的代碼是javascript利用jQuery框架的某些部分,但是諸如循環等東西,根本不需要傳遞jQuery。 – h2ooooooo

回答

0

所以從評論看來,我的意思似乎存在一些混淆,我很抱歉。這是解釋對我來說很有意義的一個例子,但我不可能把所有的事情都傳達好。

清除一點點混淆。從PHP代碼傳遞給javascript的數組中包含了第二個下拉列表中所需的所有內容。

許多人指出.options []是代碼未執行的罪魁禍首。這僅僅是我從另一個例子中發現的,而且由於我的知識有限,我認爲它是正確的,事實並非如此。

我反而使用.append()函數,現在事情似乎正常工作。

0

將其更改爲

for(var x = 0; x < menuItems.length; x++){ 
     if(menuItems[x]['header'] == 1){ 
      var option = $('<option />', { 
        text : menuItems[x]['name'], 
        value: menuItems[x]['sort'] 
      }); 
      $('#dropdown2 option[value="'+[menuItems[x]['sort']]+'"]').replaceWith(option); 
     } 
} 

$('#dropdown2').options[]是無效的,因爲jQuery的沒有這些方法,這對純JS DOM節點。