2014-04-01 35 views
2

我想基於用戶從下拉菜單中的選擇在jQuery中構建一個嵌套數組。這將在以後的JSON請求中使用。使用基於選擇的下拉下來的jQuery填充變量

到目前爲止,我的代碼確實產生了(幾乎)所需的結果,但無論順序如何從我的下拉菜單中選擇選項,輸出(我在終端中登錄控制檯)始終是相同的。

$('#comboGenre').change(function() { 
    var values = $('#comboGenre').val(); 
    var parsedJSON = JSON.parse($data); //Data returned from ajax request 
    for (var i = 0; i < values.length; i += 1) { 
     $genreList = parsedJSON.genre[i]; 
     console.log($genreList); 
    } 
}); 

所以,如果我從我的下拉菜單中選擇RPG和動作,輸出給了我RPG和駕駛。如果我選擇RPG,駕駛和行動(按此順序),我會得到我期望的角色扮演,駕駛和行動。

所以它只是遍歷我的JSON,當它真的應該返回'selected'選項。

我該如何做到這一點?

我的JSON看起來是這樣的,如果它是有用的:

{"genres": [{ 
     "genre": "RPG", 
     "publishers": [{ 
      "publisher": "Square", 
      "games": [{ 
       "game": "FFX", 
       "rating": [ 
        12, 15 
       ] 
      }] 
     }] 
    }, 
      { 
     "genre": "Driving", 
     "publishers": [{ 
      "publisher": "Turn10", 
      "games": [{ 
       "game": "Forza", 
       "rating": [ 
        5 
       ] 
      }] 
     }]   
    }, 
    { 
     "genre": "Action", 
     "publishers": [{ 
      "publisher": "EA", 
      "games": [{ 
       "game": "COD", 
       "rating": [ 
        18, 20 
       ] 
      }] 
     }]   
    }   
]} 

編輯:

我也試過這樣:

$('#comboGenre').change(function() { 
    var parsedJSON = JSON.parse($data); 
    $genreList = ""; 
    $.each(parsedJSON.genres, function(index, value){ 
    $genreList = parsedJSON.genres[index]; 
    console.log($genreList); 
    }); 
}); 

而我最終得到中的所有對象我JSON,所以從這裏開始,我只想將所選對象添加到$genreList變量中。

+0

是這樣多選框?和「駕駛」和「行動」是兩種不同的選擇? – lshettyl

+0

是的,bootstrap UI – Hagbard

+0

如果你創建了一個小提琴,它會幫助你 - > http://jsfiddle.net/ – lshettyl

回答

1

如果您打破了一些邏輯並創建了流派查找功能並使用選定的字符串查找適當的對象,然後可以將對象放入稍後將用到的變量中。我的一些檢查,以確保已選擇的種類是不是已經在我的數組這是因爲我使用了多個選擇

的jsfiddle:http://jsfiddle.net/vkTFq/

代碼:

$(function(){ 
var selectedGenres = []; 
var genres =[{"genre":"RPG","publishers":[{"publisher":"Square","games":[{"game":"FFX","rating":[12,15]}]}]},{"genre":"Driving","publishers":[{"publisher":"Turn10","games":[{"game":"Forza","rating":[5]}]}]},{"genre":"Action","publishers":[{"publisher":"EA","games":[{"game":"COD","rating":[18,20]}]}]}] 
    $('#comboGenre').change(function() { 

     $(this).find(":selected").each(function() { 
      var selectedGenre = findGenre($(this).val()) 

      if (!genreAlreadySelected(selectedGenre.genre)) { 
       selectedGenres.push(selectedGenre); 
      }; 


     }); 
     console.log (JSON.stringify(selectedGenres)); 
    }); 

    function genreAlreadySelected(genre){ 
     for(var i = 0; i < selectedGenres.length; i++){ 
      if (genre == selectedGenres[i].genre) { 
       return true; 
      }; 
      return false; 
     } 
    } 

    function findGenre(genre){ 
     for(var i = 0; i < genres.length; i ++){ 
      console.log(genre) 
      if(genre == genres[i].genre){ 
       return genres[i]; 
      } 
     } 

    }; 


}); 
相關問題