如何获取ID动态变化的HTML控件的值？ （在JavaScript中）

Question

我是JavaScript的新手并且一度陷入困境。需要你的帮助。

我有2个下拉列表，而不是正常的＆＃39;选择＆＃39;一些，但在无序列表和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的选定值填充表格。如果用户更改了2个下拉列表中任何一个的任何值，我的表格应填充新值，并使用新值DD1和DD2。我试过Javascript函数（当Dropdown 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

function shownote(id) {
  var comments = document.getElementsByClassName('comment');
  Array.prototype.forEach.call(comments, function(elem) {
    elem.style.display = "none";
  });
  document.getElementById(id).style.display = "block";
}

Jquery

    // 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>

结帐fiddle了解相关信息。希望这会对你有所帮助。