ロジックのデモ(jsFiddle):ここをクリック!
上にリンクされているデモは、私が達成したい結果です。ただし、これを変換して、XML 変数asize & apriceからこのコンテンツを動的に埋める必要があります。以下は、AJAX を使用してカスケード ドロップダウンに使用している現在の方法です。
XML データ:
<avar aval="1" asize="Small Flag" aprice="$26.00" atext="Size 0"/>
JSデータ:
if($('#drpType').val() == "1")
{
$.ajax({
type: "GET",
url: "Flags.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('avar').each(function(){
$('#drpSize').append($('<option></option>').val($(this).attr('aval')).html($(this).attr('atext')));
});
}
});
}
ロジック (非機能):
if($('#drpSize').val() == "1")
{
$.ajax({
type: "GET",
url: "Flags.xml",
dataType: "xml",
success: function(xml) {
// GET XML Value (asize) & print to <span class="ms"> onChange (#drpSize)
// GET XML Value (aprice) & print to <span class="mp"> onChange (#drpSize)
$('#drpSize').change(function (){
$(xml).find('aval').each(function(){
if ($(this).val() == "1") {
$('.ms').text('asize');
$('.mp').text('aprice');
});
}
});
}