使用jQuery的ASP.NET动态下拉列表访问

Question

我在asp.net中的asp:listview控制代码下创建了一个动态dropdownlist ，如下所示：

<asp:ListView runat="server" ID="lst" OnItemDataBound="lst_dataBound">
<ItemTemplate>
  <asp:DropDownList runat="server" CssClass="test" ID="ddl"></asp:DropDownList> 
  <asp:HiddenField runat="server" ID="hf" Value='<%# Eval("Id") %>' />                                           
  <a class="btn btn-success" id='<%#Eval("ID") %>'  onclick="Add('<%#Eval("ID")%>')>Add</a>
</ItemTemplate>
</asp:ListView>

在服务器端，我给出了源并绑定了列表，并且在项目数据databound事件中，我绑定了dropdownlist ，这是完美的，但是如上图所示，当我单击锚标记时，我希望从下拉列表中选择项目，因此我尝试了以下操作：

 var item = $('.test option:selected').text();
         alert(item);

这给了我所有列表项，例如，如果我有10个列表，那么有10个下拉列表，因此，如果每个都有4个项，则在每个列表中将文本作为（1,2,3,4）选择项，因此它会随机（“ 1212134232”）警报中有10个项目，但我要一个，所以我尝试了另一种解决方案，像这样在服务器端提供了动态CSS类

DropDownList myDDL = (DropDownList)e.Item.FindControl("ddl");
HiddenField HF_ID = (HiddenField)e.Item.FindControl("hf");
myDDL.ID = "test" + HF_ID.Value;

所以现在有了动态类名，可以在jQuery-JavaScript上访问它们，因此我使用它们的代码是

这是我将从函数参数中获得的id

var test = "test" + id;
var item = $('.test option:selected').text();
alert(item);

在这里它应该给出正确的答案，但没有给出答案，所以我进一步尝试检查元素，看看是否可以正常工作，是的，它们具有动态css类，因此我进行了进一步思考，并尝试使用像test20这样的动态边名称， test21等... y不尝试静态值，所以我尝试

var item = $('.test20 option:selected').text();
    alert(item);

是的，它的工作是给我特定的下拉列表选定的值，但是不能静态完成，因此我在这里需要帮助。

呈现的html是：

<select class="test29" id="ContentPlaceHolder1_lst_ddl_5" name="ctl00$ContentPlaceHolder1$lst$ctrl5$ddl">
        <option value="85">1</option>
        <option value="86">2</option>
        <option value="87">3</option>
        <option value="88">4</option>

    </select>

单击元素警报对话框的屏幕快照，应该给出test29（1234（其中之一））但得到...

<div class="col-xs-12 col-ms-6 col-sm-4 col-md-3 col-lg-3">
     <select name="ctl00$ContentPlaceHolder1$lst$ctrl0$ddl" id="ContentPlaceHolder1_lst_ddl_0" class="test23">
            <option value="65">1</option>
            <option value="66">2</option>
            <option value="67">3</option>
            <option value="68">4</option>

        </select>
                            <input type="hidden" name="ctl00$ContentPlaceHolder1$lst$ctrl0$hf" id="ContentPlaceHolder1_lst_hf_0" value="23"> 
                            <a class="btn btn-success" id="23" onclick="Add('23')">
                                Add</a> 
</div>
<div class="col-xs-12 col-ms-6 col-sm-4 col-md-3 col-lg-3">
                            <select name="ctl00$ContentPlaceHolder1$lst$ctrl1$ddl" id="ContentPlaceHolder1_lst_ddl_1" class="test25">
            <option value="69">1</option>
            <option value="70">2</option>
            <option value="71">3</option>
            <option value="72">4</option>
        </select>
                            <input type="hidden" name="ctl00$ContentPlaceHolder1$lst$ctrl1$hf" id="ContentPlaceHolder1_lst_hf_1" value="25"> 
                            <a class="btn btn-success" id="25" onclick="Add('25')">
                                Add </a> 
</div>
<div class="col-xs-12 col-ms-6 col-sm-4 col-md-3 col-lg-3">
                            <select name="ctl00$ContentPlaceHolder1$lst$ctrl2$ddl" id="ContentPlaceHolder1_lst_ddl_2" class="test26">
            <option value="73">1</option>
            <option value="74">2</option>
            <option value="75">3</option>
            <option value="76">4</option>
        </select>
                            <input type="hidden" name="ctl00$ContentPlaceHolder1$lst$ctrl2$hf" id="ContentPlaceHolder1_lst_hf_2" value="26">
                            <a class="btn btn-success" id="26" onclick="Add('26')">
                                Add</a>
</div>
<div class="col-xs-12 col-ms-6 col-sm-4 col-md-3 col-lg-3">
                            <select name="ctl00$ContentPlaceHolder1$lst$ctrl3$ddl" id="ContentPlaceHolder1_lst_ddl_3" class="test27">
            <option value="77">S</option>
            <option value="78">M</option>
            <option value="79">L</option>
            <option value="80">XL</option>

        </select>
                            <input type="hidden" name="ctl00$ContentPlaceHolder1$lst$ctrl3$hf" id="ContentPlaceHolder1_lst_hf_3" value="27">
                            <a class="btn btn-success" id="27" onclick="Add('27')">
                                Add</a>
</div>
<div class="col-xs-12 col-ms-6 col-sm-4 col-md-3 col-lg-3">
                            <select name="ctl00$ContentPlaceHolder1$lst$ctrl4$ddl" id="ContentPlaceHolder1_lst_ddl_4" class="test28">
            <option value="81">1</option>
            <option value="82">2</option>
            <option value="83">3</option>
            <option value="84">4</option>

        </select>
                            <input type="hidden" name="ctl00$ContentPlaceHolder1$lst$ctrl4$hf" id="ContentPlaceHolder1_lst_hf_4" value="28">
                            <a class="btn btn-success" id="28" onclick="Add('28')">
                                Add</a>

</div>

需要其他信息吗？

Answer 1

您可以尝试以下代码来获取同一列表项中下拉列表的选定值。 您需要在click事件处理程序中编写它， this才能提供调用方对象，并有助于在同一列表项中找到最接近的下拉列表。

$(this).siblings("select").find(":selected").val()