使用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()