Question 169256 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Does jQuery have a way to check if a dropdown list has values that are populated dynamically?

I have a dropdown list City Offices which populates based on another select option of dropdown ‘Country ‘.

When user select the Country dropdown then City Offices dropdown can be populated based on the selected country. But
not all the Country has City Offices thus city dropdown could be empty.

I am using ASP.Net MVC 4.8. The country selection execute a ajax method which calls the Controller’s ActionMethod to get the values based on the Country dropdown value and get the City to populate city dropdown.

If City dropdown is empty then I do not want to check for the required field validation if City dropdown has list of options then I want to validate it as required field.

I am trying with the below code but for some reason it always find the if condition true and show the alert message. I suppose it should not show the alert message when the dropdown for the city is populated.

  $(document).ready(function () {

        $('#btnubmit').on("click", function () {


     if ($('#ddlStateList').has('option').length > 0)
     {
         alert("has value.");   

         if ($("#ddlStateList").val() === "") {
             $('#lbStateListError').show();
         }
     else 
         {
             $('#lbStateListError').hide();
           
         }
     }
  }

}

View

  @(Html.Kendo().DropDownList()

                                .Name("ddlStateList")
                                .HtmlAttributes(new { @class = "form-control", style = "width:100%" })
                                .DataValueField("StateName")
                                .DataTextField("StateName")
                                .AutoBind(false)
                                 .Events(e =>
                                 {
                                     e.Change("ddlchange")/*.Select("select")*/;
                                 })

                            )

The above code run at the submit button.

I tried to check the length with below code and it always return 0. even when city dropdown is populated

     var check = $('#ddlCityList option').length;
     console.log(check);
Tags:

2

Answers


  1. 0

    You should use children() instead of has()

    Login or Signup to reply.
  2. 0

    I’m going to guess that you always have at least one option. it is common to have a SELECT control like:

    <select name="cities"><option value="">Choose City...</option></select>

    in which case, what you really need to do is check for an option with a value of any kind.

    The selector doesn’t appear to be good for this, probably best something like

        if ($("#ddlStateList").val() === "" && 
        $('#ddlStateList option').filter(function() { return $(this).val() !== ''; }).length > 0)
    {
        $('#lbStateListError').show();
    }
    else 
    {
        $('#lbStateListError').hide();
    }

    `

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search