CODEWITHSUNDEEP
javascriptjqueryjquery-chosen
Giorgio Forti
Giorgio Forti

Reputation: 135

Forcing SELECT with chosen to refresh after changing option's selected property

On a old project I use jQuery v1.7.1 and Chosen 0.9.8 (updated to 0.9.10 but nothing changes). I have some SELECT each with 21 options, and I need to select / unselect some options with JavaScript every time the user clicks on a checkbox. I do it and I see the changes inspecting the page. I don't see anything changing in the SELECT, like trigger("liszt:updated") does nothing. Any Idea?

Here is the HTML (simplyfied): 

@for (int i = 0; i < Model.SoasEsitiLavori.Count(); i++)
          {
            SoaModel soa = Model.SoasEsitiLavori[i];

            <tr>
               <td>
                <select id="SoasEsitiLavori[@i]._RegioniEsiti" multiple="multiple" 
                        name="SoasEsitiLavori[@i]._RegioniEsiti"
                        class="regionilavori chzn-select" >
                  @foreach (XRegione reg in ViewBag.ElencoRegioni)
                  {
                    <option value="@reg.IDRegione">@reg.Regione</option>
                  }
                </select>
              </td>

            </tr>
          }

Here is the Javascript (simplyfied):

function CheckRegioneClick(RegioneCheck) {

  var CurrentChecked = RegioneCheck.checked;
  var CurrentValue = RegioneCheck.value;

  //Extracts a list of "SELECT"
  var regioni = document.getElementsByClassName('regionilavori');

  for (z = 0; z < regioni.length; z++) {

      var r = regioni[z];
      var r1 = document.getElementById(r.id);
      var ao = r1.getElementsByTagName('option');

      for (var i = 0; i < ao.length; i++) {
        if (ao[i].value == CurrentValue) {
          ao[i].selected = CurrentChecked;

          //This SHOULD update the SELECT, but nothing happens
          $(r.id).trigger("liszt:updated");              
        }
      }    

      $(r.id).trigger("liszt:updated");
      $(r.id).val(CurrentValue).trigger("liszt:updated");

    }        
  }
}

How can i force the SELECT to refresh?

Upvotes: 0

Views: 2325

Answers (3)

pixellab
pixellab

Reputation: 608

You can use $('select').trigger('chosen:updated');

for further reference please check https://harvesthq.github.io/chosen/options.html

Upvotes: 2

khofaai
khofaai

Reputation: 1357

You have select multiple so each time you select option you got array of values as result. you can check this test for your case.

$("#RegioniEsiti").chosen();

$('body').on('click', '.search-choice-close', function(event) {
  var close = $(event.currentTarget)
  var option = $("#RegioniEsiti option")
  $(option[close.attr('rel')]).removeAttr('selected');
});

$("#RegioniEsiti").on('change',function() {
  var $this = $(this);
    $($this.val()).each(function(v,val) {
    $this.find("option[value="+val+"]").attr("selected","selected");
  });
});

Upvotes: 0

gaetanoM
gaetanoM

Reputation: 42054

Your issue is here:

$(r.id)

The right jQuery selector by ID need a pound prefix, hence:

$('#' + r.id)


$("#RegioniEsiti").chosen();
var regioni = document.getElementsByClassName('regionilavori');
var CurrentChecked = true;
var CurrentValue = '1';
for (z = 0; z < regioni.length; z++) {
    var r = regioni[z];
    var r1 = document.getElementById(r.id);
    var ao = r1.getElementsByTagName('option');
    for (var i = 0; i < ao.length; i++) {
        if (ao[i].value == CurrentValue) {
            ao[i].selected = CurrentChecked;

            //This SHOULD update the SELECT, but nothing happens
            //$('#' + r.id).trigger("liszt:updated");
        }
    }

    $('#' + r.id).trigger("liszt:updated");
    $('#' + r.id).val(CurrentValue).trigger("liszt:updated");
}
.regionilavori {
    width: 350px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/0.9.10/chosen.min.css">
<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/0.9.10/chosen.jquery.min.js"></script>


<select id="RegioniEsiti" multiple="multiple" name="RegioniEsiti" class="regionilavori chzn-select">
    <option value="1">Campania</option>
    <option value="2">Lombardia</option>
    <option value="3">Toscana</option>
    <option value="4">Lazio</option>
</select>

Upvotes: 0

Related Questions