Choices-js选择列表返回数组，如何直接获取单个值？

方法1：禁用隐藏输入框，使用原生select提交值 #

Choices.js默认会生成隐藏输入框来提交选中值，导致后端收到数组格式数据。初始化时添加hiddenInput: false配置，即可让表单使用原生select的提交逻辑，直接返回单个值：

<script src="/assets/js/plugins/choices.min.js"></script>
<script>
    const gender = document.getElementById('choices-gender');
    if (gender) {
        const example = new Choices(gender, {
            hiddenInput: false
        });
    }
</script>

方法2：前端手动获取单个值 #

如果需要在JavaScript中直接获取选中的单个值，可调用Choices实例的getValue(true)方法，该方法会返回选中项的value字符串：

// 假设example是已初始化的Choices实例
const selectedGender = example.getValue(true);
// selectedGender 会是 "male" 或 "female"

方法3：后端提取数组中的值（备选） #

若不想修改前端，也可在后端直接从返回的数组中提取value字段的值，比如在Livewire中：

$gender = $this->gender['value'];

内容的提问来源于stack exchange，提问作者GamaRay