Placeholder adding as input tag

How Do I...
#1

Using C# MVC razor to pull a dropdown list from the controller.

Then added the Select2 jquery to the id of the dropdown with a multiselect option in the jquery.

@Html.DropDownList(“pathologyField”, null, “”, htmlAttributes: new { @class = “textbox-control” })
$(document).ready(function () { $("#pathologyField").select2({multiple: true, allowClear: true, placeholder: “Select”, maximumSelectionLength: 6 }); });

This works in terms of giving me access to the jquery but when i click on the first option in the drop-down, it adds the placeholder in the input. I would like the Select placeholder to be there but when you click the drop-down it must only show the options clicked and not the placeholder as well.

#2

Without seeing the generated HTML code in your page it’s hard to diagnose your issue. (I’m also not sure I understand the behavior you’re describing.) Have you followed the Select2 documentation for multi-select placeholders?

#3

Hi John

Thank you very much for the reply.

Attached is an example of what is currently happening. I’m assuming its the placeholder but not sure why its happening, could it perhaps be that you have to pass the jquery through a textbox or input tag rather than a dropdown select? The issue is also on on the multiple select option and not the single.

So attached you’ll see an image that as the dropdown menus where i’ve added the Select 2 js. When you select the first of multiple options, an empty “option” is included and in this case is only the ‘x’ which is to clear the option. That is pulling through to the controller as an empty string which is causing a bit of discomfort for other queries so was just hoping to not include it.

image1
image11887×417 63.7 KB

#4

Hi, Thomas–

Thanks for attaching the screen shots. I’ve never seen this behavior before, so I’m not sure where it’s coming from. My guess is that there is an empty <option selected> element in the HTML <select> element that is added by @Html.DropDownList. It’s hard to know without seeing the actual HTML that is generated. Could you capture that portion of the page source (using your browser’s “View source” command) and paste it here so I can see what HTML is actually generated by @Html.DropDownList?

FWIW, I googled the documentation for @Html.DropDownList, and I cannot find a method signature that matches the types and order of parameters in your code above. The closest I could find is this signature:

public System.Web.IHtmlString DropDownList (string name, string defaultOption, System.Collections.Generic.IEnumerable<System.Web.WebPages.Html.SelectListItem> selectList, object htmlAttributes);

Trying to map your method call to this signature, it looks like you have the “defaultOption” and “selectList” parameters in the wrong order. I’m guessing you are not passing the list of <options> to the method (that’s the null parameter`)—and presumably you’re loading the options data some other way. I don’t know whether this is causing the issue you’ve described, but I think it’s something to investigate.

#5

Hi John

I do see the empty string but this is because of the placeholder that’s being added. I’ve attached below both the dropdown razor and the source to show you how I’ve set this up.

                        <div class="col-md-6">
                            <div class="col-md-3">
                                @Html.Label("Medical scheme", htmlAttributes: new { @class = "control-label col-md-12" })
                            </div>
                            <div class="col-md-9">
                                @Html.DropDownList("medicalAidID", null, "", htmlAttributes: new { @class = "infoBox_editMember" })
                            </div>
                        </div>

The source control for the dropdown is as follows:

            <div class="form-horizontal">

                <div class="form-group">
                    <div class="col-md-12">
                        <div class="col-md-6">
                            <div class="col-md-3">
                                <label class="control-label col-md-12" for="Medical_scheme">Medical scheme</label>
                            </div>
                            <div class="col-md-9">
                                
                                <select class="infoBox_editMember" id="medicalAidID" name="medicalAidID"><option value=""></option>
TEST1 TEST2 TEST3 TEST4 TEST5 testMedicalAid 
                            </div>
                        </div>
#6

According to the documentation, you must not have an empty <option> element if you are using a placeholder with a multi-select Select2.