I have two dropdowns Month and Year. Depending on the year, the list of months will change. This works fine, but for some reason my "span field" is not getting updated. The problem is that the click event is not getting called, when the user choose for a month. Note: The year works perfect.
Hide the dropdown div
function Dropdown (element) {
$("#month div, #year div").hide(); // hide all dropdowns
if (element) $("#"+element+" div").toggle(); // show dropdown of specified element
}
Logic to show the list depending on the dropdown year value
function UpdateMonths(){
var temp = "";
if (parseInt(Get.Year()) <= 2012){
temp = "<p>Month1</p>";
}else{
temp = "<p>Month9</p>";
}
return temp;
}
Display a list of months or years
$("#month span, #year span").click(function(event) {
$("#month div").html(UpdateMonths()); // IMPORTANT Show the right list of months
event.stopPropagation();
if (!$(this).hasClass('disabled')) { // only open downdown when not disabled
Dropdown($(this).parent().attr("id"));
} else Dropdown(); // hide all dropdown menues
});
The user choose the value he wants. Not working for months
$("#location div p, #month div p, #year div p").click(function() {
var value = $(this).text(); // grab new location name/month/year.
$(this).parent().parent().children("span").text(value); // update selected location name/month/year.
RequestToServer();
});
Month dropdown
<div id="month">
<span class="input">Januar</span>
<div class=".dropdown">
<p></p>
</div>
</div>
The selector should be:
The reason for this is because you want to detect a click on anywhere within the
#month
and#year
divs. By targeting the spans in your original code, you would only get the click event on the span itself, which by default is an inline element and so it doesn't fill the 100% width.