Hi,
I am new to JavaScript and stuck at one point. Need your help.
I have 2 dropdowns, not the normal 'Select' ones, but made with the help of Unordered list and CSS. Something like:
Dropdown 1:
<ul class="dropdown-menu" min-width: 180px;">
@foreach(Fruit item in Fruits)
{
<li><a id="@("FR_" + @item.FruitID)" onClick="RefreshPullDown(this.id)">@item.FruitName</a></li>
}
</ul>
Dropdown 2:
<ul class="dropdown-menu" min-width: 180px;">
@foreach(Vedgetable item in Vegetables)
{
<li><a id="@("VEG_" + @item.VegetableId)" onClick="RefreshPullDown(this.id)">@item.VegetableName</a></li>
}
</ul>
As you can see, in both the dropdowns, the IDs are generated dynamically. Now my aim is to populate a table based on the selected values of both Dropdown 1 and Dropdown 2. If the user changes any of the values of any of the 2 dropdowns, my table should be populated with the new values taking the new values in DD1 and DD2. Following Javascript function I tried (when Dropdown 1 value is changed):
Javascript:
function RefreshPullDownValue(anchorId) {
var fruitAnchorId;
var vegAnchorId;
if (anchorId.indexOf('FR') >= 0) {
fruitAnchorId = anchorId;
}
else {
VegAnchorId = anchorId;
}
var fruitValue = #('#' + fruitAnchorId).text();
}
Problem here is I can get the value of the list item which is clicked. How am I suppose to get the value which is already selected in the other DD at the same time, since its ID is dynamic and not fixed.I need to get both the dropdown values in one JS function in order to proceed. Any help would be appreciated.