Creo que no entendí bien lo que habías dicho, entonces, ¿tu estructura sería así?:
Código HTML:
Ver original <input type = "checkbox" value = "1" /> 1
<input type = "checkbox" value = "2" /> 2
<input type = "checkbox" value = "3" /> 3
<input type = "checkbox" value = "4" /> 4
<input type = "checkbox" value = "5" /> 5
<input type = "checkbox" value = "6" /> 6
Si fuera así, tendrías que hacerlo de este modo:
Código Javascript
:
Ver originalvar filtrar = document.getElementById("filter"),
select = document.getElementsByTagName("select")[0],
menus = document.getElementsByTagName("ul"),
total = menus.length,
salida = document.getElementById("salida");
filtrar.addEventListener("click", function(){
var dataString = "";
for (i = 0; i < total; i++){
var opciones = menus[i].getElementsByTagName("li");
for (j = 0, subTotal = opciones.length; j < subTotal; j++){
var checkbox = opciones[j].getElementsByTagName("input")[0];
if (checkbox.checked)
dataString += dataString.length ? "&" + opciones[j].id + "=" + checkbox.value : opciones[j].id + "=" + checkbox.value;
}
}
if (select.value > 0)
dataString += dataString.length ? "&" + select.id + "=" + select.value : select.id + "=" + select.value;
salida.innerHTML = "Resultado: " + dataString;
}, false);
Como el <select> es un elemento independiente de los dos <ul>, lo tomas desde un principio, luego, la forma en como tomaba los valores de los checkbox sigue siendo la misma, finalmente, tomaría el valor seleccionado en el <select> si es que éste es mayor a cero.
Así se ve en ejecución:
http://jsbin.com/tafev/1
Por si a caso, funciona bien en Chrome, Opera, Firefox, Safari y en IE.
Saludos