locked
change css class of a dropdownlist in a div with jquery RRS feed

  • Question

  • User1982683974 posted

    Hello 

    I have an mvc dropdownlist inside a div.the div has a css class that apply the style to the dropdownlist.

    the code below is not working :

      $("#div.make_ddl").removeClass("select-box disabled").addClass("select-box svg");

    Wednesday, July 13, 2016 8:43 PM

Answers

  • User-474980206 posted

    you should study CSS selectors.

    $("#div.make_ddl")

    is looking for an element with id="div" and classname="make_ddl" (which I see no matching markup). but it appears you want to change the class the parent div to a select with the id="make_ddl". this would be:

    $("#make_ddl").parent("div")

    note: .parent("div") requires the parent to be a div

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 14, 2016 4:44 PM

All replies

  • User61956409 posted

    Hi Yosr Jemili,

    the code below is not working :

      $("#div.make_ddl").removeClass("select-box disabled").addClass("select-box svg");

    Please try to use $("#div .make_ddl") to find <select> (add a space between “#div” and “.make_ddl”). The following sample code works fine on my side, you could refer to it.

    <div id="div">
        @Html.DropDownList("NameCust", (IEnumerable<SelectListItem>)ViewBag.MovieType, new { @class = "make_ddl select-box disabled", style = "height:30px; width:245px;" })
    </div>
    
    $("#div .make_ddl").removeClass("select-box disabled").addClass("select-box svg");

    Best Regards,

    Fei Han



    Thursday, July 14, 2016 2:47 AM
  • User1982683974 posted

    thank you so much

    I did use this : 

        $("#div .make_ddl").removeClass("select-box disabled").addClass("select-box svg");

    still not working 

    Thursday, July 14, 2016 1:47 PM
  • User475983607 posted

    Show the HTML source code.  Otherwise we can only guess.

    Thursday, July 14, 2016 2:12 PM
  • User1982683974 posted
           public static MvcHtmlString CustomDropDownListFor<TModel, TProperty>(
                this HtmlHelper<TModel> htmlHelper,
                Expression<Func<TModel, TProperty>> expression,
                IEnumerable<SelectListItem> selectedValues,
                object htmlAttributes = null)
            {
                var stringBuilder = new StringBuilder();
                var attrs = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
                stringBuilder.Append(
                    attrs.ContainsValue("disabled") ? "<div class=\"select-box disabled\">" : "<div class=\"select-box svg\">");
                stringBuilder.Append(
                    htmlHelper.DropDownListFor(expression, selectedValues, htmlAttributes));
                stringBuilder.Append("</div>");
                return new MvcHtmlString(stringBuilder.ToString());
            }

    above is the code of my custom dropdownlist

    razor:

      @Html.CustomDropDownListFor(model => model.Vehicle.Make, Enumerable.Empty<SelectListItem>(), new { @Id = "make_ddl" , @disabled = "disabled"})

    my dropdownlist is inside a div and I coudlt refer it into my jquery code

    Thursday, July 14, 2016 2:52 PM
  • User-474980206 posted

    you should study CSS selectors.

    $("#div.make_ddl")

    is looking for an element with id="div" and classname="make_ddl" (which I see no matching markup). but it appears you want to change the class the parent div to a select with the id="make_ddl". this would be:

    $("#make_ddl").parent("div")

    note: .parent("div") requires the parent to be a div

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 14, 2016 4:44 PM
  • User1982683974 posted

    thank you so much it s working

    Thursday, July 14, 2016 6:10 PM