Uncaught TypeError: Cannot set property 'selected' of undefined

Question

This is my JSFiddle

My html and js works fine in JSFiddle. But its giving error in the console in my rails app

Uncaught TypeError: Cannot set property 'selected' of undefined admin.js:1000 Chosen.result_select admin.js:1000 Chosen.search_results_mouseup admin.js:1000 (anonymous function) admin.js:1000 x.event.dispatch admin.js:6 v.handle

HTML

<div class="col-xs-3 equ">
       <select class = "car-select col-xs-10 col-sm-10 col-sm-offset-1 center boxalign" id = "brand">
          <option value="brand">Brand Select</option>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes1">Mercedes</option>
          <option value="audi">Audi</option>
          <option value="volvo2">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
    </div>

  <div class="col-xs-3 equ">
       <select class = "car-select col-xs-10 col-sm-10 col-sm-offset-1 center boxalign" id = "car">
          <option value="brand" class = "mercedes">Brand Select</option>
          <option value="volvo" class = "mercedes">Volvo</option>
          <option value="saab" class = "volvo">Saab</option>
          <option value="mercedes" class = "volvo">Mercedes</option>
          <option value="audi" class = "volvo">Audi</option>
          <option value="volvo" class = "mercedes">Volvo</option>
          <option value="saab" class = "mercedes">Saab</option>
          <option value="mercedes" class = "mercedes">Mercedes</option>
          <option value="audi" class = "mercedes">Audi</option>
        </select>
  </div>

JavaScript

$(".car-select").chosen({disable_search_threshold: 10});
$(".car-select-deselect").chosen({allow_single_deselect:true}); 
  $(function() {
    $("#car").chained("#brand"); 
    $("#brand").trigger("liszt:updated");   
    $("#brand").bind("change", function(){
    $("#car").trigger("liszt:updated")
    });
});

Answer 1

Adding <option disabled></option> to your list will solve the error.

Answer 2

This is an old question, but it I got the same error recently. I fixed this adding an empty option tag, like this:

<select class = "car-select col-xs-10 col-sm-10 col-sm-offset-1 center boxalign" id = "car">
      <option value=""></option>
      <option value="brand" class = "mercedes">Brand Select</option>
      <option value="volvo" class = "mercedes">Volvo</option>
      <option value="saab" class = "volvo">Saab</option>
      <option value="mercedes" class = "volvo">Mercedes</option>
      <option value="audi" class = "volvo">Audi</option>
      <option value="volvo" class = "mercedes">Volvo</option>
      <option value="saab" class = "mercedes">Saab</option>
      <option value="mercedes" class = "mercedes">Mercedes</option>
      <option value="audi" class = "mercedes">Audi</option>
</select>