如何獲取ID動態變化的HTML控件的值？ （在JavaScript中）

Question

我是JavaScript新手，只停留在一點。 需要你的幫助。

我有2個下拉菜單，不是正常的“選擇”下拉菜單，而是借助無序列表和CSS進行的。 就像是：

下拉菜單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>

下拉菜單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>

如您所見，在兩個下拉列表中，ID都是動態生成的。 現在，我的目標是基於下拉列表1和下拉列表2的選定值填充表。如果用戶更改了兩個下拉列表中任何一個的值，則我的表應使用新值填充，其中包含DD1和DD2。 我嘗試了以下Javascript函數（當下拉列表1的值更改時）：

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..
        }

這里的問題是我可以獲取被單擊的列表項的值。 我想如何獲得同時在另一個DD中選擇的值，因為它的ID是動態的並且不是固定的。我需要在一個JS函數中同時獲得兩個下拉值，然后才能繼續。 任何幫助，將不勝感激。

Answer 1

您可以在類似這樣的點擊中存儲值。

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

第二個下拉菜單

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

在你的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
  }
 }

您還可以使用jquery簡化代碼並使之更好。

Answer 2

在第一個DD中，ID與“ FR__”串聯

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

在第二個DD中，ID與“ VEG_”串聯

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

因此，您已經知道何時執行此操作：

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

   //second DD
    }

Answer 3

您可以通過像這樣@Nehal在jquery中更改代碼來實現此目的

的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);
});

查看此小提琴以進行理解。 希望這對您有所幫助。