How to get the value of an HTML control whose ID changes dynamically? (in JavaScript)

See more:

Javascript

jQuery

HTML5

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;
//checking if anchorId contains FR or VEG
        if (anchorId.indexOf('FR') >= 0) {
            fruitAnchorId = anchorId;
        }
        else {
            VegAnchorId = anchorId;
        }
            var fruitValue = #('#' + fruitAnchorId).text();
    //How to fetch the othr dropdown value here??
        // code to call controller and get the table populated..
            }

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.