操縱的選擇變化

我新的jQuery和我想知道，如果他能夠JSON數組。我有一個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，如果我改變我的選擇合適的描述應該出現在格的下拉列表中綠色。我選擇該選項將不再出現在選擇列表上一樣，如果我選擇綠色，只有紅色和藍色應該出現在可用的選項，如果我選擇另一種顏色，讓說，藍色然後紅色和綠色應該可用於其他選擇。

我目前做它運行一個新的查詢平變化的選擇，但我想這樣做沒有另一個查詢和頁面刷新，我想這是可能的，因爲我已經發送JSON陣列到瀏覽器。

希望我是對我的問題清楚，感謝您的幫助！

來源

2015-11-04 AL DI

這不是有效的JSON。 – TheCarver

你將不得不發佈你的Javascript/jQuery代碼。我猜想畸形的JSON來自AJAX，但我們需要看看你是如何得到這一點，然後我們可以幫助你更好。 – TheCarver

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); 
});

來源

2015-11-04 22:27:44 Almis

感謝的Almis，這幾乎是所有我需要的，現在還有一兩件事，我如何刪除所選的選項，就像如果我選擇綠色，只有藍色和紅色應該出現，但如果當時我選擇藍，綠應該再次同時出現紅色 –

@ALDI檢查編輯 – Almis

非常感謝您的幫助！ –

首先，你必須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'); 


    }); 
});

來源

2015-11-04 23:16:48

操縱的選擇變化

回答

相關問題