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

Question

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();
//How to fetch the other 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.

Answer 1

You can store values on click something like this.

<li><a id="@("VEG_" + @item.VegetableId)" onClick="StorePullDownValue(this.id, 'first')">...</li>

Second dropdown

 <li><a id="@("VEG_" + @item.VegetableId)" onClick="StorePullDownValue(this.id, 'second')">...</li>

In your js

var dd1 = null,
    dd2 = null;

var StorePullDownValue = function(value,type){
  if(type == "first"){
      dd1 = value;
   }else{
      dd2 = value;
   }
  if(dd1 != null && dd2 != null){
     // call your function here to generate a table
  }
 }

You can also use jquery to simplify your code and make it better.

Answer 2

in the first DD the IDs concatenated with "FR__"

id="@("FR_" + @item.VegetableId)"

in the second DD the IDs concatenated with "VEG_"

id="@("VEG_" + @item.FruitID)"

So you already knows when you did that :

    if (anchorId.indexOf('FR') >= 0) {
        fruitAnchorId = anchorId;
   //first DD
    }
    else {
        VegAnchorId = anchorId;

   //second DD
    }

Answer 3

you can achieve this simply by changing your code in jquery like this @Nehal

HTML

    // Dropdown 1
  <ul class="dropdown-menu" style="min-width: 180px;"> 
    @foreach(Fruit item in Fruits)
     {
     <li><a id="@("FR_" + @item.FruitID)" class="fruitItem">@item.FruitName</a></li> 
     }
    </ul>
   // Dropdown 2
    <ul class="dropdown-menu" style="min-width: 180px;">

         @foreach(Vedgetable item in Vegetables)
         {
         <li><a id="@("VEG_" + @item.VegetableId)" class="vegItem">@item.VegetableName</a></li>
         }
        </ul>

Jquery

$('a.vegItem').on('click', function (event)
{
      var VegSelection= $(this).text();
   alert(VegSelection);
});

 $('a.fruitItem').on('click', function (event)
{

   var FruitSelection= $(this).text();
   alert(FruitSelection);
});

checkout this fiddle for understanding. Hope this helps you.