使用 jQuery 默认选择一个选项

Posted 2023-02-24

【中文标题】使用 jQuery 默认选择一个选项

【英文标题】：Chosen select an option by default with jQuery

【发布时间】：2012-02-27 23:30:47

【问题描述】：

我有一个带有选项的选择框，我在 Zend 视图上使用 jQuery "Chosen"。这个插件很好用。

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

我的问题是我需要在页面加载时根据 type_id 的值选择其中一个选项。我试过这个：

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

这会改变它的值，但在选择的 JQuery 中没有选择该选项。

有什么想法吗？

---

编辑：通过执行我上面提到的操作，该选项成功更改，但它不会更新/更改 jQuery“选择”插件中的选定元素。我的问题是关于更新 jQuery Chosen 的选定值而不是 html SELECT （我已经成功完成）。 Here is a link to jQuery Chosen plugin

【问题讨论】：

这不是两个独立的问题吗？ jQuery提供的与值无关，反之亦然。

【参考方案1】：

尝试以下方法：

$("#choen-presentacion").val(value.id_presentacion).trigger('chosen:updated')

【参考方案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>

Chosen 将自行初始化并显示两个预先选择的选项。

【参考方案3】：

试试这个：

$("#select_type").val(<?=$this->type_id?>).trigger('change');

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

【参考方案4】：

用 JS 更新列表

运行后：

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

对于选择的版本 1 及更高版本（更新）

你应该打电话：

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

取自Chosen documentation：

动态更新选择

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

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

有关此 API 更改的公告，请参阅 the change log。

对于低于 1（旧）的选择版本

你应该打电话：

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

取自Chosen documentation：

动态更新选择

如果您需要更新选择字段中的选项并希望选择 要获取更改，您需要触发“listzt:updated” 场上的事件。 Chosen 将根据更新的内容重新构建自己 内容。

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

在调用 Chosen 之前设置值

您为什么不在使用 JavaScript 调用 Chosen 插件之前在 HTML 中设置选定的选项，而不是从 JS 中执行此操作？您正在从一段 php 中设置值，所以我不明白为什么不能这样做。

【讨论】：

这太棒了！我需要让change() 在DOM 上运行，但让<select> 恢复正常。如果您的第一个选项是 <option value></option> 就像在文档中一样，您可以将其放在 change() 绑定的末尾以重置选择菜单：$(this).val(""); $(this).trigger("liszt:updated")

从 1.0 版开始，触发器现在是“选择：更新”。见harvesthq.github.io/chosen/#change-update-events

@Tony 谢谢你提到这一点。我已经更新了我的答案，以反映他们 API 的这些变化。

【参考方案5】：

$('#select_type').val('<?=$this->type_id?>');

试试看

【讨论】：

谢谢yapingchen，但我知道如何设置一个选项我需要在我上面提到的插件中选择

$('#select_type').val('=$this->type_id?>');

【参考方案6】：

试试这个：

$('#select_type').val('<?=$this->type_id;?>'); // Select the value before .chosen();
$('#select_type').chosen();