locked
please advise on multiple column <select> dropdown list RRS feed

  • Question

  • User1868852945 posted

    Can someone please recommend a way to have an html select element where each option would have multiple columns that would appear in a columnar format?  That is, I would like to have the basic features of the select element in addition to having the multiple columns line up vertically as rows.  I do not need to select more than one option.  Thanks.

    Monday, June 13, 2016 7:46 PM

Answers

  • User1868852945 posted

    Here is a sample for multiple column dropdown select list using only divs, css and jquery.  My code might be a bit rough for some, but it works and I could not find a browser that had any issues.

    <!DOCTYPE HTML>

    <html>
    <head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.own Table Detail</title>

    <style type="text/css">
    *, html {
    ''font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
    }

    body {
    background-color: azure;
    color: black;
    }

    #dropdown_container {
    float: left;
    width: 70%;
    height: auto;
    border: solid 1px blue;
    overflow: auto;
    }
    .arrow-down {
    float: right;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid black;
    margin-top: 10px;
    margin-right: 5px;
    }

    .arrow-down_filler {
    float: right;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid transparent;
    margin-right: 5px;
    }

    .tableName_container {
    float: left;
    height: auto;
    width: 99%;
    display: none;
    margin-left: 10px;
    cursor: pointer;
    }

    .table_name {
    float: left;
    width: 22%;
    height: auto;
    margin-right: 10px;
    }

    .delta_type {
    float: left;
    width: 19%;
    height: auto;
    }

    .date {
    float: left;
    width: 19%;
    height: auto;
    }

    .baseline {
    float: left;
    width: 19%;
    height: auto;
    word-break: break-all;
    margin-right: 10px;
    }
    </style>

    <script src="js/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">

    $(function () { //this is the overall function
    $(document).ready(function () {
    $(".tableName_container").each(function () {
    if ($(this).data('selected') == "y") {
    $(this).css("display", "block");
    } else {
    $(this).css("display", "none");
    }
    });
    });

    $('.tableName_container').click(function () {
    if ($("#dropdown_container").data('open') == "n") {
    $(".tableName_container").each(function () {
    $(this).css("display", "block");
    });
    $("#dropdown_container").data('open', 'y');
    } else {
    $(".tableName_container").each(function () {
    $(this).data('selected', 'n');
    });
    $("#dropdown_container").data('open', 'n');
    $(this).data('selected', 'y');
    $(".tableName_container").each(function () {
    if ($(this).data('selected') == "y") {
    $(this).css("display", "block");
    } else {
    $(this).css("display", "none");
    }
    });
    }
    });

    $('.tableName_container').mouseenter(function () {
    $(this).css("background-color", "lightgray");
    });

    $('.tableName_container').mouseleave(function () {
    $(this).css("background-color", "azure");
    });

    }) //end of overall function

    </script>

    </head>
    <body>
    <div id="dropdown_container" data-open="n">
    <div class="tableName_container" id="line_one" data-line_id="1" data-selected="n">
    <div class="table_name" id="table_name1">line_one</div>
    <div class="baseline" id="baseline1">1.0</div>
    <div class="delta_type" id="delta_type1">created</div>
    <div class="date" id="date1">1/1/2015</div>
    <div class="arrow-down"></div>
    </div>
    <div class="tableName_container" id="line_two" style="display: block;" data-line_id="2" data-selected="y">
    <div class="table_name" id="table_name2">line_two</div>
    <div class="baseline" id="baseline2">2.45</div>
    <div class="delta_type" id="delta_type2">created</div>
    <div class="date" id="date2">1/1/2016</div>
    <div class="arrow-down"></div>
    </div>
    <div class="tableName_container" id="line_three" style="border-bottom: solid 1px blue; display: block;" data-line_id="3" data-selected="n">
    <div class="table_name" id="table_name3">line_three</div>
    <div class="baseline" id="baseline3">now_is_the_time_for_all_good_men_to_come_to_the_aid</div>
    <div class="delta_type" id="delta_type3">created</div>
    <div class="date" id="date3">3/1/2016</div>
    <div class="arrow-down"></div>
    </div>
    </div>
    </body>
    </html>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 15, 2016 3:31 PM

All replies

  • User1633621018 posted

    Hi,

    It seems you are looking something like this;

    http://www.jerriepelser.com/blog/using-option-groups-with-mvc6-select-taghelper

    Monday, June 13, 2016 9:25 PM
  • User61956409 posted

    Hi gunderj,

    Can someone please recommend a way to have an html select element where each option would have multiple columns that would appear in a columnar format?

    According to your description, it seems that you’d like to display option in multi columns. Some jQuery ComboBox plugins enable us display options in custom format, for example jqxComboBox we could customize the look of the list items by using renderer function.

    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/index.htm#demos/jqxcombobox/rendering.htm

    Best Regards,

    Fei Han

    Tuesday, June 14, 2016 2:18 AM
  • User1868852945 posted

    Thanks Pawanpal and Fei, but these suggestions only give a "categories" feature, where I am asking for multiple columns that line up or stack up vertically in a columnar format, similar to a grid.  I don't think there is going to be an ability to do this other than coding with div, sub divs and jquery to handle the select features of the <select> element.  

    I did find one solution that would pad two columns to stack properly in a single column <select> but it was very buggy.  Here is it for those interested...

    http://stackoverflow.com/questions/17162219/html-multiple-column-drop-down-with-adjusted-columns

    Tuesday, June 14, 2016 1:37 PM
  • User1868852945 posted

    Here is a sample for multiple column dropdown select list using only divs, css and jquery.  My code might be a bit rough for some, but it works and I could not find a browser that had any issues.

    <!DOCTYPE HTML>

    <html>
    <head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.own Table Detail</title>

    <style type="text/css">
    *, html {
    ''font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
    }

    body {
    background-color: azure;
    color: black;
    }

    #dropdown_container {
    float: left;
    width: 70%;
    height: auto;
    border: solid 1px blue;
    overflow: auto;
    }
    .arrow-down {
    float: right;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid black;
    margin-top: 10px;
    margin-right: 5px;
    }

    .arrow-down_filler {
    float: right;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid transparent;
    margin-right: 5px;
    }

    .tableName_container {
    float: left;
    height: auto;
    width: 99%;
    display: none;
    margin-left: 10px;
    cursor: pointer;
    }

    .table_name {
    float: left;
    width: 22%;
    height: auto;
    margin-right: 10px;
    }

    .delta_type {
    float: left;
    width: 19%;
    height: auto;
    }

    .date {
    float: left;
    width: 19%;
    height: auto;
    }

    .baseline {
    float: left;
    width: 19%;
    height: auto;
    word-break: break-all;
    margin-right: 10px;
    }
    </style>

    <script src="js/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">

    $(function () { //this is the overall function
    $(document).ready(function () {
    $(".tableName_container").each(function () {
    if ($(this).data('selected') == "y") {
    $(this).css("display", "block");
    } else {
    $(this).css("display", "none");
    }
    });
    });

    $('.tableName_container').click(function () {
    if ($("#dropdown_container").data('open') == "n") {
    $(".tableName_container").each(function () {
    $(this).css("display", "block");
    });
    $("#dropdown_container").data('open', 'y');
    } else {
    $(".tableName_container").each(function () {
    $(this).data('selected', 'n');
    });
    $("#dropdown_container").data('open', 'n');
    $(this).data('selected', 'y');
    $(".tableName_container").each(function () {
    if ($(this).data('selected') == "y") {
    $(this).css("display", "block");
    } else {
    $(this).css("display", "none");
    }
    });
    }
    });

    $('.tableName_container').mouseenter(function () {
    $(this).css("background-color", "lightgray");
    });

    $('.tableName_container').mouseleave(function () {
    $(this).css("background-color", "azure");
    });

    }) //end of overall function

    </script>

    </head>
    <body>
    <div id="dropdown_container" data-open="n">
    <div class="tableName_container" id="line_one" data-line_id="1" data-selected="n">
    <div class="table_name" id="table_name1">line_one</div>
    <div class="baseline" id="baseline1">1.0</div>
    <div class="delta_type" id="delta_type1">created</div>
    <div class="date" id="date1">1/1/2015</div>
    <div class="arrow-down"></div>
    </div>
    <div class="tableName_container" id="line_two" style="display: block;" data-line_id="2" data-selected="y">
    <div class="table_name" id="table_name2">line_two</div>
    <div class="baseline" id="baseline2">2.45</div>
    <div class="delta_type" id="delta_type2">created</div>
    <div class="date" id="date2">1/1/2016</div>
    <div class="arrow-down"></div>
    </div>
    <div class="tableName_container" id="line_three" style="border-bottom: solid 1px blue; display: block;" data-line_id="3" data-selected="n">
    <div class="table_name" id="table_name3">line_three</div>
    <div class="baseline" id="baseline3">now_is_the_time_for_all_good_men_to_come_to_the_aid</div>
    <div class="delta_type" id="delta_type3">created</div>
    <div class="date" id="date3">3/1/2016</div>
    <div class="arrow-down"></div>
    </div>
    </div>
    </body>
    </html>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 15, 2016 3:31 PM