Манипулировать массив Json при выборе смены

Question

Я новичок в JQuery, и мне интересно, возможно ли его. У меня есть контроллер PHP, который посылает JSON закодированные массив тем, это JSON массив:

{"id":"1","color":"blue","description":"This is the color blue"}, 
{"id":"8","color":"green","description":"This is the color green"}, 
{"id":"14","color":"red","description":"This is the color red"} 

Теперь на взгляд у меня есть следующие:

<select id="selector"> 
<option value="">Select one</option> 
<option value="1">blue</option> 
<option value="8">green</option> 
<option value="14">red</option> 
</select> 

<div id="description"> 

</div> 

Я хочу для этого нужно сначала заполнить список выбора из массива json, а затем, если я выберу зеленый из раскрывающегося списка, описание для зеленого должно появиться в div, если я изменю свой выбор, соответствующее соответствующее описание должно появиться в div. И опция, которую я выбираю, больше не должна появляться в списке выбора, например, если я выбираю зеленый, только красный и синий должны появиться на доступной опции, если я выбираю другой цвет, пусть говорят синий, тогда красный и зеленый должны быть доступны для другого выбора ,

В настоящее время я запускаю новый запрос на замену, но я хочу сделать это без другого запроса и обновления страницы, я думаю, это возможно, так как я уже отправляю массив JSON в браузер.

Надеюсь, что я ясно понимаю мою проблему и благодарю вас за помощь!

Answer 1

var data = [{"id":"1","color":"blue","description":"This is the color blue"}, 
{"id":"8","color":"green","description":"This is the color green"}, 
{"id":"14","color":"red","description":"This is the color red"}]; 
var selector = $('#selector'); 

data.forEach(function(obj){ 
    // create option 
    var option = $('<option>'); 
    // set its value 
    option.val(obj.id); 
    // set its text 
    option.text(obj.text); 
    // append it to select element 
    selector.append(option); 
}  
selector.change(function(){ 
    var value = this.value; 
    // show all options 
    selector.find('option').show(); 
    // hide the selected 
    $(value).hide(); 
    // find the selected object 
    var selected = data.filter(function(obj){ 
     return obj.id == value; 
    }); 
    // if returns exactly one show its description 
    if (selected.length == 1) 
     $('#description').text(selected[0].description); 
}); 

Answer 2

Во-первых, вы Json должны быть такими:

[{"id":"1","color":"blue","description":"This is the color blue"}, 
{"id":"8","color":"green","description":"This is the color green"}, 
{"id":"14","color":"red","description":"This is the color red"}] 

это некоторый код, я попробовал я думаю, что это будет вам помочь:

$(document).ready(function(e){ 
    $("#selector").on('change',function(){ 
     var dataL= $("#selector option:selected").val(); 
     $.post("Page_json.php",{myVal:dataL},function(data,message,xhr){ 
          if(message==='success'){ 
           $.each(data, function(k,v){ 
            if(v.id == dataL){ 
             $("#description").text(v.description); 
             return false; 
            } 
           }); 
          } 
         },'json'); 


    }); 
});