Unable to get dropdown selected value from aspx page to backend

Question

Hello Guys i am using a web service and ajax call to bind my cascading drop down lists but i am not able to get the selected value of first drop down in code behind..

this is my code

 $(document).ready(function () {
              var groups = $('#ddlGrpName');
              var docs = $('#ddlDoctors');

              //var getval = $('#ddlGrpName').val();
              //var anothrva = $('#ddlDoctors').val();

              $.ajax({
                  url: 'Dataservice.asmx/GetGroups',
                  method: 'post',
                  dataType: 'json',
                  success: function (data) {

                      groups.append($('<option/>', { value: -1, text: 'select Group' }));
                      docs.append($('<option/>', { value: -1, text: 'select Doctor' }));
                      docs.prop('disabled', true);
                      $(data).each(function (index, item) {
                          groups.append($('<option/>', { value: item.id, text: item.name }));

                          $('#<%=hdnGroupid.ClientID%>').val(item.id);

                      });

                  }


              });

              groups.change(function () {
                  if ($(this).val() == "-1") {
                      docs.empty();
                      docs.append($('<option/>', { value: -1, text: 'select Doctor' }));
                      docs.val('-1');
                      docs.prop('disabled', true);
                  }

                  else {
                      $.ajax({
                          url: 'Dataservice.asmx/GetGroupsid',
                          method: 'post',
                          data: { groupID: $(this).val() },
                          dataType: 'json',
                          success: function (data) {
                              docs.empty();
                              docs.append($('<option/>', { value: -1, text: 'select Doctor' }));
                              docs.prop('disabled', false);
                              $(data).each(function (index, item) {
                                  docs.append($('<option/>', { value: item.id, text: item.pname }));

                                  $('#<%=hdnDoctorid.ClientID%>').val(item.id);
                              });

                          }


                      });
                  }

              });


          });``

drop down values are binding but not able to get the selected value of drop down while saving in the database. this are two cascading drop downs i am getting the value of second drop down when i take a hidden field , but when i check the same way with the first drop down i am only getting the same value , but drop down selected value changes whenever i change the drop down its not happening

please help??

Answer 1

The problem is here :

data: { groupID: $(this).val() }

in the ajax call context it will not capture the dropdown using this keyword, you will need to store the $(this).val() result in a variable in groups.change event outside ajax call and then use that variable in the ajax call to send the value.

So change it to be like:

groups.change(function () {

  var groupId = $(this).val();
  ..................
  ..................
  $.ajax({
         ..........
         ...........
         data: { groupID: groupId }
         ...........

Hope it helps!

Answer 2

try this

    $(function () {
        $(groups).change(function () {
            var group = $('option:selected', $(this)).val();
            if ($(group).val()==”-1”){// -1 selected} else {//blah}
        });
    });

Answer 3

string fruit = Request.Form[this.ddlname.UniqueID]; string juice = Request.Form[this.ddname.UniqueID];

This gives the right output..

we can get the drop down selected value using the Request.form collection https://msdn.microsoft.com/en-us/library/ms525985(v=vs.90).aspx check out here..

hope it helps..