在更改选项的选定属性后强制 SELECT 选择刷新

Question

在一个旧项目中，我使用 jQuery v1.7.1 和 Chosen 0.9.8（已更新至 0.9.10，但没有任何变化）。我有一些 SELECT，每个都有 21 个选项，每次用户单击复选框时，我都需要 select / unselect 一些带有 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

您的问题在这里：

$(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 2

你有 select 多个，所以每次你 select 选项你都会得到值数组作为结果。你可以检查这个 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");
  });
});

Answer 3

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

如需进一步参考，请查看 https://harvesthq.github.io/chosen/options.html

在更改选项的选定属性后强制 SELECT 选择刷新

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

javascript

jquery

jquery-chosen

在更改选项的选定 属性 后强制 SELECT 选择刷新

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

javascript

jquery

jquery-chosen

在更改选项的选定属性后强制 SELECT 选择刷新