0

I am using a JQuery chosen control. It remains open after item selection, also before clicking on it, it is displaying the search textbox. I don't want either of these things to be happening.

Here's the code for the dropdown in MVC using EF:

<div class="form-group">
    @Html.LabelFor(model => model.Field, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownListFor(model => model.Field, null, htmlAttributes: new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.Field, "", new { @class = "text-danger" })
    </div>
</div>

Here's the script:

<script type="text/javascript">
    $("#Field").chosen();
</script>

what am I missing here. I thought this behaviour was there by default?

Edit: To anyone else having this problem - I forgot to link the chosen.css

Dom
  • 83
  • 7
  • Perhaps your dropdown get the focus automatically/by default? So the chosen box will be visible. Take a look into the console. Are any errors thrown? – Martin E Jan 06 '17 at 19:43
  • The dropdown doesn't have focus and no errors are being thrown. – Dom Jan 06 '17 at 19:57

1 Answers1

0

Try this;

<script type="text/javascript">

   $("#Field").chosen({
        max_selected_options: 1,
        allow_single_deselect: true, // check out what happens when you remove this option
        disable_search: true, // if you dont want to show search box
   }).removeAttr("multiple");

   $("#Field").on("chosen:maxselected",function(evt, params){
        $('#Field').trigger('chosen:close');
   });

</script>
Serhat MERCAN
  • 1,078
  • 3
  • 14
  • 31
  • Thanks but no success. I don't understand why `.trigger('chosen:close');` doesn't close the control. – Dom Jan 06 '17 at 23:00
  • If you dont want to close drop down after select, you can remove the chosen:maxselected event function. When the "chosen:maxselected" event rised, trigger to close event. – Serhat MERCAN Jan 06 '17 at 23:05
  • I do want to close the control after select. I've tried many combinations and the damn control won't close. – Dom Jan 06 '17 at 23:08
  • Yes I've already looked at that resource - that's where I got the control from. – Dom Jan 06 '17 at 23:10
  • I'm no expert on JQuery I find it particularly unintuitive. What values are you passing to `evt` and `params` in `function(evt, params)`? What's vexing me is the why the control has defaulted to exposing the search box and not closing after selection when on the github link this behavior is there by default. I've added nothing new to the control in my script. – Dom Jan 06 '17 at 23:27
  • When you add a tag with html helper, MVC does not add "id" attribute. Are you sure is there "id" attribute in this Field tag? If there is no "id" attribute in your select tag, jquery cant reach it. You can add id attribute in the htmlAttributes parameters like this; @Html.DropDownListFor(model => model.Field, null, htmlAttributes: new { @class = "form-control", @id="Field" }) – Serhat MERCAN Jan 07 '17 at 11:47
  • In the event function, you dont pass parameters. The event will send the parameters and after event run, you use them. evt and params parameter come from event handler. – Serhat MERCAN Jan 07 '17 at 11:50
  • Field is a property of the model, it is not an HTML tag. JQuery reaches it as it creates the control. The problem is the control has weird behavior. The difference between the examples in the provided link is that they use a ` – Dom Jan 07 '17 at 12:58
  • You are using the Model property for creating DOM element which is writing in the html tags. For example is a tag. When you create a tag with using html helper, you call @Html.EditFor(model=>model.exampleProp) This helper create html tag. Smilar that, Html.DropDownFor helper create a select element and add a name attribute. Set the property name into the name attribute. But helper does not create id attribute. If there is no id attribute, jquery cant reach by the way of #exmapleProp. "#asdf" means; this asdf is tag id value in jquery! – Serhat MERCAN Jan 07 '17 at 13:30
  • Adding `@id="Field"` to the htmlAttributes also made no difference. – Dom Jan 08 '17 at 15:23
  • Found the problem - I hadn't linked the chosen.css – Dom Jan 08 '17 at 22:29
  • I'm happy for you :) – Serhat MERCAN Jan 08 '17 at 22:52