級聯選擇與現有的多重選擇窗體

Question

我與結合JavaScript的工作，以創建成爲一個下載的複合文件名的PHP輸出形式工作。

我已經實現了這個帖子，以及：所以現在

Three Select Boxes Interacting to Yield One Result - HTML, JavaScript or jQuery

我有一個現有的多項選擇形式：

<select id="one"> 
    <option value="default">Select Product</option> 
    <option class="s" value="1">product1</option> 
    <option class="q" value="2">product2</option> 
    <option class="q" value="3">product3</option> 
</select> 

<select id="two"> 
    <option value="default">Select Version</option> 
    <option class="l" value="4">product4</option> 
    <option class="l" value="5">product5</option> 
    <option class="c" value="6">product6</option> 
</select> 

<select id="three"> 
    <option value="default">Select OS</option> 
    <option class="o" value="7">product7</option> 
    <option class="o" value="8">product8</option> 
    <option class="o" value="9">product9</option> 
</select> 

<select id="three"> 
    <option value="default">Select Architecture</option> 
    <option class="a" value="10">product10</option> 
    <option class="a" value="11">product11</option> 
    <option class="a" value="12">product12</option> 
</select> 

當單擊該按鈕，它連接了字符串，並創建一個作爲下載安裝程序的URL。這工作正常，並在大多數情況下產生一個有效的文件下載。

但有幾個選項是無效的。我爲這篇文章添加了上面的類，因爲很明顯他們在相應的組中。

現在，這裏的問題是，我如何才能級聯這種存在形式影響？在PHP和JavaScript我使用的是：

從PHP文件：

$output .= '<div><p class="download-button"><a id="viewer-dl"'; 
$output .= ' onclick="download_file(document.getElementById('; 
$output .= "'" . $product_id . "'" . ').value, document.getElementById('; 
$output .= "'" . $version_id . "'" . ').value, document.getElementById('; 
$output .= "'" . $os_id  . "'" . ').value, document.getElementById('; 
$output .= "'" . $arch_id . "'" . ')"></a></p></div>'; 

從JavaScript文件：

$(function() { 
    $("#viewer-dl").click(function() { 
     download_viewer($('#product_id').val(), $('#version_id').val(), 
      $('#os_id').val(), $('#arch_id').val()); 
    }); 
}); 

function download_file(version_id, os_id, arch_id) { 

    if (product_id == 'default' && version_id == 'default' && 
     os_id == 'default' && arch_id == 'default') { 
     return; 
    } 

    else if (product_id != 'default') { 
     window.location = 'mysite.com/download/Install_' + 
      product_id + '_' + version_id + '_' + arch_id + '.exe'; 
    } 
} 

我想要做的是當s類被選中，我想選擇下一個選擇的l和c類，但選擇了q上課的時候，我只是想選擇的c類。操作系統，架構選擇我想在那裏爲所有選擇，因此這些類是相同的。

Answer 1

我創建小演示中，你可以做的jsfiddle什麼：http://jsfiddle.net/nx6yF/

基本上我做什麼，我牆根所有其他選擇，但第一，那麼如果第一選擇的變化，你必須檢查的選擇，並顯示第二選擇

$("#one").change(function() { 
     var val = $(this).val(); 
     if (val != "default") { 
      $("#two").show(); 
     } 
}); 

您還需要決定在第二選擇要顯示的選項。也許類不是來處理這個最實際的事情，但它可能是這樣的：

var is_q = $("#one > option[value="+val+"]").hasClass("q"); 
$("#two > option").each(function() { 
     if (!$(this).hasClass("c") && $(this).val() != "default") { 
      if (is_q) { 
       $(this).attr("disabled",true); 
      } 
      else{ 
       $(this).attr("disabled",false); 
      } 
     } 
}); 

我這裏使用的禁用選項，但也有可能隱藏它們。反正禁用/牆根的選擇也應改變，如果選擇違約，爲了正確地作出形式工作，多選擇

在此之後，如果選擇二是選中，然後顯示選擇三個你可以檢查。當然，有些選擇具有默認值，那麼應該隱藏下一個選擇。

我不知道有沒有簡單的答案，如何創建級聯效應 - 它只是需要編碼來做到這一點。

Answer 2

我創建使用列表，而不是選擇的演示：http://jsfiddle.net/MQ3u3/5/

<ul id="parents"></ul> 
<ul id="children"></ul> 
<div id="bucket"></div> 


var data = [{ 
    "id": 1, 
     "name": "Item1", 
     "children": [{ 
     "id": 1, 
      "name": "child one" 
    }, { 
     "id": 2, 
      "name": "child two" 
    }] 
}, { 
    "id": 2, 
     "name": "Item2", 
     "children": [{ 
     "id": 1, 
      "name": "child three" 
    }, { 
     "id": 2, 
      "name": "child four" 
    }] 
}, { 
    "id": 3, 
     "name": "Item3", 
     "children": [{ 
     "id": 1, 
      "name": "child five" 
    }, { 
     "id": 2, 
      "name": "child six" 
    }] 
}]; 
$(function() { 
    for (var i = 0; i < data.length; i++) { 
     createParentItem(i); 
    } 
    $('li.parent').on('click', function() { 
     $('#children li').remove(); 
     var parentId = $(this).attr('data-id'); 

     for (var i1 = 0; i1 < data.length; i1++) { 
      if (parentId == data[i1].id) { 
       for (var i2 = 0; i2 < data[i1].children.length; i2++) { 
        createChildItem(i1, i2); 
       } 
      } 
     } 
     $('li.child').off(); 
     $('li.child').on('click', function() { 
      var parentId = $(this).attr('parent-data-id'); 
      var childId = $(this).attr('child-data-id'); 
      for (var i1 = 0; i1 < data.length; i1++) { 
       if (parentId == data[i1].id) { 
        for (var i2 = 0; i2 < data[i1].children.length; i2++) { 

         if (childId == data[i1].children[i2].id) { 
          addToBucket(i1, i2); 
         } 
        } 
       } 
      } 
     }); 
    }); 
}); 
function createParentItem(index) { 
    var li = $('<li>', { 
     class: 'parent', 
      "data-id": data[index].id, 
     text: data[index].name 
    }); 
    $('ul#parents').append(li); 
} 
function createChildItem(pIndex, cIndex) { 
    var li = $('<li>', { 
     class: 'child', 
      "parent-data-id": data[pIndex].id, 
      "child-data-id": data[pIndex].children[cIndex].id, 
     text: data[pIndex].children[cIndex].name 
    }); 
    $('ul#children').append(li); 
} 
function addToBucket(pIndex, cIndex) { 
    var child = data[pIndex].children[cIndex]; 
    var childElm = $('<span>', { 
     text: child.name + ' ' 
    }); 
    $('#bucket').append(childElm); 
}