locked
Allowing only single selection in a Listbox in MVC 5 Razor application RRS feed

  • Question

  • User559435292 posted

    Hi,

    Below is a Listbox control in my MVC 5 razor application.

    @Html.ListBox("lstName", null, new { @class = "form-control", id = "lstName" })

    The Listbox allows multiple selection by default but I want only single selection. I tried the following script but didn't work. Could anyone please help me?

    <script type="text/javascript">
        $(document).ready(function () {
            $(function () {
                $("select[name='lstName']").removeAttr('multiple');
            });
        });
        </script>

    Thanks.

    Saturday, October 27, 2018 11:00 AM

Answers

  • User-474980206 posted
    You can add the html size attribute to the drop down to get the list box look.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, October 28, 2018 4:45 PM
  • User-821857111 posted

    I am not sure whether it is related to this issue, the Listbox is in a partial view and it is being loaded in it's parent in a Modal by Ajax call. I tried the script both in Partial and Parent view.
    Yes it is related. You need to put the code that removes the attribute in the success callback of the Ajax operation. If you are using the load method it would look like this:

    $('#somelement').load('/someurl', {data}, function(){
        $("select[name='lstName']").removeAttr('multiple');
    });

    There is no point in trying to remove the attribute when the page loads because it doesn't exist at that point.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 29, 2018 7:26 AM

All replies

  • User-821857111 posted

    Don't use a ListBox helper if you only intend to allow a single selection. Use a DropDownList instead.  It will render the select without the multiple attribute.

    Saturday, October 27, 2018 8:02 PM
  • User-474980206 posted
    You can add the html size attribute to the drop down to get the list box look.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, October 28, 2018 4:45 PM
  • User559435292 posted

    Hi,

    I don't have option to convert all Listbox to DDL now. Is there any alternate ways to do it with JS or JQuery?

    Thanks

    Monday, October 29, 2018 5:33 AM
  • User1724605321 posted

    Hi pointtoshare,

    Your scripts is not correct  :

        $(document).ready(function () {
    

    Please try this :

    <script type="text/javascript">
        $(function () {
            $("select[name='lstName']").removeAttr('multiple');
        });
    </script>

    Best Regards,

    Nan Yu

    Monday, October 29, 2018 6:06 AM
  • User559435292 posted

    Hi Nan Yu,

    I have already tried it, didn't work. Tried again but no luck.

    Edit: I am not sure whether it is related to this issue, the Listbox is in a partial view and it is being loaded in it's parent in a Modal by Ajax call. I tried the script both in Partial and Parent view.

    Thanks.

    Monday, October 29, 2018 6:35 AM
  • User-821857111 posted

    I am not sure whether it is related to this issue, the Listbox is in a partial view and it is being loaded in it's parent in a Modal by Ajax call. I tried the script both in Partial and Parent view.
    Yes it is related. You need to put the code that removes the attribute in the success callback of the Ajax operation. If you are using the load method it would look like this:

    $('#somelement').load('/someurl', {data}, function(){
        $("select[name='lstName']").removeAttr('multiple');
    });

    There is no point in trying to remove the attribute when the page loads because it doesn't exist at that point.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 29, 2018 7:26 AM
  • User-474980206 posted

    just fix your javascript:

    <script type="text/javascript">
        $(function () {
             $("select[name='lstName']").removeAttr('multiple');
        });
    </script>

    you were defining a ready in a ready. also passing window is obsolete (as its the only legal value for .ready)

    Monday, October 29, 2018 3:24 PM
  • User559435292 posted

    Hi Mike,

    It worked! .ready function was not a problem, putting script just after loading the partial and adding html size attribute worked fine. Thanks.

    Tuesday, October 30, 2018 10:17 AM