I am having trouble getting the code below to work I am not getting any errors. What I need is when #equipmentList1 Changes it displays a dropdown list corresponding to the selection. Then depending on the selecting of the later dropdown it should just write the value of the dropdown selected to the equipmentList2 DIV. selectedVisibleValue1 contains the ID of the field that appears after the first dropdown is chosen I have tried passing it into the second function to write it using innerHTML but it acts like it is not receiving the variable since nothing happens. Maybe I have an error elsewhere in my code. I am new to jQuery so if someone could take a look and let me know what is wrong that would be awesome.
$(document).ready(function () {
$('#equipmentList1').bind('change', function () {
var elements = $('div.equipmentList2').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if somethings' selected
elements.filter('.' + value).show(); // show the ones we want
var selectedVisibleValue1 = $(".equipmentList2 select:visible").attr("id");
}
}).trigger('change');
});
$(document).ready(function () {
$("#" + selectedVisibleValue1).bind('change', function () {
var value = $(this).val();
if (value.length) {
var equipment = document.getElementById("equipmentList1").value;
document.getElementById('equipmentList2').innerHTML = selectedVisibleValue1;
}
}).trigger('change');
});
selectedVisibleValue1isn't known until a change occurs in other select. Use class as selector to bind change to second select