How do I reset chosen-jquery?

Question

I'm using jquery 3.3.1 slim min and chosen 1.8.7

inside a form I have a select multiple and a reset button:

<form>
  <select id="users" name="users" tabindex="2" class="form-control chosen-select" multiple>
    <option value=""></option>
    <option value="1">1</option>
  </select>

  <button type="button">
    Clear
  </button>

</form>

I do the initialization of the chosen:

$("#users")
  .chosen({
    no_results_text: "Oops, nothing found!",
  })
  .change(function(event) {

    if (event.target == this) {

      $users = $(this).val()
    }
  })

and when i try to reset the chosen, it doesn't update the html interface:

$('button').on('click', function() {
  $("#users").val([]).trigger('chosen:updated')
})

What am I forgetting?

with that, I expected that it would update the interface, however it resets the value but does not update the interface html

$("#users").val([]).trigger('chosen:updated')

I also tried without success

$("#users").val('').trigger('chosen:updated')

Edit

before: before

Add options Add options

Console Console

options were not removed, however the value was reset after

Does this answer your question? [How can I reset a form with jQuery chosen plugin?](https://stackoverflow.com/questions/7897760/how-can-i-reset-a-form-with-jquery-chosen-plugin) — Pete, Mar 28 '23 at 12:15
@Pete, yes, i tried `.val(' ')`, but doesnt work. I saw this question too, but it didn't work. — Mateus, Mar 28 '23 at 12:58
you have a space between your quotes, unless you have a value that is a space, it won't set the value — Pete, Mar 28 '23 at 12:59
it also worked for me, but in the application they reset the value and do not update the interface, I really don't see why `$("#users").val('').trigger('chosen:updated')` doesn't work. it's like `$("#users").val('')` works, but `.trigger('chosen:updated')` does not update the event — Mateus, Mar 28 '23 at 13:24

Jordy · Answer 1 · 2023-03-28T13:59:49.357

0

Looks like your code works. Maybe you are missing importing the CSS library so that's makes confusion:

https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css

$("#users")
  .chosen({
    no_results_text: "Oops, nothing found!",
  })
  .change(function(event) {

    if (event.target == this) {

      $users = $(this).val()
    }
  });

$('button').on('click', function() {
  $("#users").val('').trigger('chosen:updated')
});

$('a').click(()=>{
  console.log($('#users').val());
});

select {
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet"/>
<form>
  <select id="users" name="users" tabindex="2" class="form-control chosen-select" multiple>
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

  <button type="button">
    Clear
  </button>
  <a href="#">Check Value</a>

</form>

edited Mar 28 '23 at 13:59

answered Mar 28 '23 at 13:24

Jordy

1,802
2
6
25

I have ` ` at the top of the page, I made sure that the files are the same as the cdnjs – Mateus Mar 28 '23 at 13:50
I just edit the answer. Please make sure your code is similar – Jordy Mar 28 '23 at 13:57
thank you for your attention. After clicking on the clear button, I check the value and it is null, but there are still the options that I selected on the screen, the elements have not been removed. Is there any more information I can give you? – Mateus Mar 28 '23 at 14:12
Oh, I see, you want an option which not selected to disappear? – Jordy Mar 28 '23 at 14:18
No, I just want to reset the select and have the selected options clear – Mateus Mar 28 '23 at 14:20
Have you checked your console (inspect element)? Is there any error appearing? – Jordy Mar 28 '23 at 14:23
I checked, there are no errors. I used it to do tests and check the values of the array, the value actually resets to `[]`, however it doesn't update the element – Mateus Mar 28 '23 at 14:29
Maybe you can include screenshot of the problem for better understanding. – Jordy Mar 28 '23 at 14:31
added images to question – Mateus Mar 28 '23 at 15:06

How do I reset chosen-jquery?

1 Answers1