Asp.net dynamic dropdownlist access with jquery

Question

I am creating a dynamic dropdownlist in asp.net which is under asp:listview control code is as below:

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

on the server side I have given source and bind the list and on item databound event I have bound dropdownlist which is perfectly but as shown above when I click on an anchor tag I want selected item from drop down for that I have tried this:

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

which is giving me all list items like if i have 10 list so 10 dropdowns so if each have 4 items take text as(1,2,3,4) selected item at each list so randomly it will ("1212134232") which is 10 item in alert but I want single one so I tried another solution I give dynamic cssclass at server side like this

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

so now I have dynamic class name I can access them at jQuery - JavaScript so code which I use them for is

here id is which I will get from function parameter

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

here it should give the right answer but it is not giving it so I try further I inspect element and see if this working and yes its working dynamic css class they have so I have think further and tried like if dynamic side name given like test20, test21, etc... y not try static value so I tried

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

and yes its working it is giving me specific dropdown list selected value but this can't be done for statically so I needed help here.

rendered html is:

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

screen shot of clicking element alert dialog which should give test29(1234(one of them)) but getting....

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

any other info needed?

Answer 1

You can try below code to get the selected value of dropdown in same list item. you need to write it in click event handler so that this will give the invoker object and that will help to find the nearest dropdown in same list item.

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