Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Custom Drop down with check boxes

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #204126
    sidh2015
    Participant

    Hello

    I’m new to the forum

    I Need like your help on a custom drop down problem, I haven’t been able to solve now.

    I have to create a custom dropdown, where the drop down displays the value-Description as a text with checkbox. once checkbox selected the textbox part should set to value only.

    For example : drop down list will display list of countries (value-description).

    1-US
        2-UK
        3-IN
        4-CN
    

    once selected, the text box should set to value only ( if US is selected set text as 1)

    Thanks a lot for your help!

    #204130
    gcyrillus
    Participant

    It should be done via Javascript, a quick CSS test case can help you to sort out the HTML needed and style to apply:
    http://codepen.io/gc-nomade/pen/qdVYar

    <edit> Seems like i missunderstood the question , sorry folks.

    #204131
    sidh2015
    Participant
    <label class=”control-label” for=”FIPS”>County</label> @Html.DropDownListFor(Model => Model.CountyId, new SelectList(counties, “Key”, “Value”), “”, new { @class = “form-control”, id = “countyValue” })

    var initiateDropDownListShortAndLong2 = function (ddlShort) {

    $(ddlShort).on({
        change: function (event) {
    
            $(ddlShort + ' option:first-child ').html($(ddlShort).val());
            $(ddlShort + ' option:first-child ').val($(ddlShort).val());
    
            $(ddlShort).prop('selectedIndex', 0);
    
        }
    });
    

    };

    $(document).ready(function () {
    initiateDropDownListShortAndLong2(‘#countyValue’);
    });

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.