Question

在一个旧项目中，我使用jQuery v1.7.1和选择0.9.8（已更新为0.9.10，但没有任何变化）。我有一些带有21个选项的SELECT，并且每次用户单击复选框时，都需要使用JavaScript选择/取消选择某些选项。我这样做了，我看到了检查页面的更改。我看不到SELECT中有任何更改，例如trigger（“ liszt：updated”）没做任何事情。有想法吗？

以下是HTML（简化版）：

@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>
          }

这是Javascript（简体）：

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");

    }        
  }
}

如何强制SELECT刷新？

Answer 1

您可以使用$('select').trigger('chosen:updated');

有关更多参考，请检查 https://harvesthq.github.io/chosen/options.html

Answer 2

您的问题在这里：

$(r.id)

ID正确的jQuery选择器需要一个井号前缀，因此：

$('#' + 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>

Answer 3

您选择了多个，因此每次选择选项时，都会得到一组值作为结果。您可以根据自己的情况检查此test。

$("#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");
  });
});

更改选项的selected属性后，强制选择带有刷新的SELECT

3 个答案: