选择 默认使用jQuery选择一个选项

2022-08-30 16:21:09

我有一个带有选项的选择框,我正在Zend视图上使用jQuery“Selected”。此插件工作正常。

Javascript:
$('#select_type').chosen();

我的问题是,我需要在页面加载时选择其中一个选项,具体取决于type_id的值。我试过这个:

document.getElementById('select_type').value = '<?=$this->type_id?>';

这将更改其值,但在所选的 JQuery 中未选择该选项。

有什么想法吗?


编辑:通过执行我上面提到的操作,该选项成功更改,但它不会更新/更改jQuery“选择”插件中的所选元素。我的问题是关于更新jQuery Selected的选定值,而不是HTML SELECT(我已经成功完成了)。这是jQuery Selected插件的链接


答案 1

使用 JS 更新列表

运行后:

document.getElementById('select_type').value = '<?=$this->type_id?>';

对于所选版本 1 及更高版本(较新)

您应该致电:

$('#select_type').trigger('chosen:updated');

摘自所选文档

动态更新所选内容

如果您需要更新所选字段中的选项,并希望“已选择”(Selected) 选取更改,则需要在字段上触发“已选择:已更新”事件。所选内容将根据更新的内容重新构建自身。

$("#form_field").trigger("chosen:updated");

有关此 API 更改的公告,请参阅更改日志

对于低于 1(较旧)的选定版本

您应该致电:

$('#select_type').trigger('liszt:updated');

摘自所选文档

动态更新所选内容

如果您需要更新选择字段中的选项,并希望选择来选取更改,则需要在该字段上触发“liszt:updated”事件。所选内容将根据更新的内容重新构建自身。

  • jQuery Version$("#form_field").trigger("liszt:updated");
  • 原型版本Event.fire($("form_field"), "liszt:updated");

在调用 Selected 之前设置值

而不是从JS这样做,为什么不在用JavaScript调用Selected插件之前在HTML中设置选定的选项呢?您正在从一段PHP中设置值,所以我不明白为什么无法做到这一点。


答案 2

您只需在选择属性的情况下设置正确的元素,如下所示:

<select name="teams[]" data-placeholder="Chose an option:" 
        class="chzn-select" multiple tabindex="6">
    <option value=""></option>
    <option selected="selected">Dallas Cowboys</option>
    <option selected="selected">New York Giants</option>
    <option>Philadelphia Eagles</option>
    <option>Washington Redskins</option>
</select>

所选内容将注意初始化自身并显示两个预选选项。