如何获取ID动态变化的HTML控件的值？ （在JavaScript中） [英] How to get the value of an HTML control whose ID changes dynamically? (in JavaScript)

问题描述

我是JavaScript的新手并且一度停留。需要你的帮助。



我有2个下拉菜单，不是正常的'选择'下拉菜单，而是在无序列表和CSS的帮助下完成的。类似于：



下拉1：



<前lang =HTML> < ul class = 下拉菜单 min-width： 180px; >
@foreach（水果中的水果项目）
{
< li > < a id = @（ FR _ + @ item.FruitID ） onClick = RefreshPullDown（this.id） > @ item.FruitName < / a > < / li >
}
< / ul >

下拉2：



<前lang =HTML> < ul class = 下拉菜单 min-width： 180px; >
@foreach（蔬菜中的Vedgetable项目）
{
< 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; 
 //检查anchorId是否包含FR或VEG 
 if（anchorId.indexOf（'FR'）> = 0）{
 fruitAnchorId = anchorId; 
} 
 else {
 VegAnchorId = anchorId; 
} 
 var fruitValue =＃（'＃'+ fruitAnchorId）.text（）; 
 //如何在这里获取othr下拉值？ 
 //代码调用控制器并获取填充表格.. 
} 

这里的问题是我可以获取单击的列表项的值。我怎么想在同一时间获取已在另一个DD中选择的值，因为它的ID是动态的而不是固定的。我需要在一个JS函数中获取两个下拉值才能继续。任何帮助将不胜感激。

解决方案

如果你使用真正的下拉菜单，你可以使用jQuery：selected选项。现在，您别无选择，只能更改代码。在选择项目时添加类，它将告诉您哪个被选中。或者，将自定义属性selectedId添加到父ul元素，并在每次选择项目时刷新它。

不是我喜欢做的事情 - 但是你可以随时使你的两个变量全局：

（为了方便原因）



var fruitAnchorId;

var vegAnchorId;



函数RefreshPullDownValue（anchorId）{

//检查anchorId是否包含FR或VEG

if（anchorId.indexOf（'FR'）> = 0）{

fruitAnchorId = anchorId;

}否则{

VegAnchorId = anchorId;

}

var fruitValue =＃（'＃'+ fruitAnchorId）.text（）;

var vegValue =＃（'＃'+ vegAnchorId）.text（）;

}

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.

解决方案

If you used real dropdowns you could have used jQuery :selected option. Right now, you have little choice, but to change the code. On selection of the item add class to it that will tell you which is selected. Alternatively, add custom attribute selectedId to parent ul element and refresh it each time you select the item.

Not something I like doing - but you could always make your two vars global:
(for expediency reasons)

var fruitAnchorId;
var vegAnchorId;

function RefreshPullDownValue(anchorId) {
//checking if anchorId contains FR or VEG
if (anchorId.indexOf('FR') >= 0) {
fruitAnchorId = anchorId;
} else {
VegAnchorId = anchorId;
}
var fruitValue = #('#' + fruitAnchorId).text();
var vegValue = #('#' + vegAnchorId).text();
}

这篇关于如何获取ID动态变化的HTML控件的值？ （在JavaScript中）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！