c# - 使用 jquery 访问 Asp.net 动态下拉列表

Question

我正在asp.net中创建一个动态dropdownlist，它位于asp:listview控制代码如下:

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

在服务器端，我已经给出了源并绑定(bind)了列表，在项目 databound 事件上，我已经绑定(bind)了 dropdownlist ，这是完美的，但当我单击一个时如上所示 anchor 标记我想从下拉列表中选择项目，因为我已经尝试过:

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

它为我提供了所有列表项，例如如果我有 10 个列表，则有 10 个下拉列表，因此如果每个列表有 4 个项目，则将文本视为(1,2,3,4)在每个列表中选择的项目如此随机(“1212134232”)，这是警报中的 10 个项目，但我想要单个项目，所以我尝试了另一种解决方案，我在服务器端提供动态 cssclass，如下所示

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类，所以我进一步思考并尝试，就像给定动态边名称一样喜欢测试 20、测试 21 等...你没有尝试静态值，所以我尝试了

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

您可以尝试下面的代码来获取同一列表项中下拉列表的选定值。您需要将其写入单击事件处理程序中，以便 this 给出调用者对象，这将有助于在同一列表项中找到最近的下拉列表。

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