Laravel中使用Selectize时，获取data-tax-rate值更新输入框显示null的问题

嗨，我来帮你搞定这个问题～

首先得搞清楚为啥用了Selectize之后原来的代码就失效了：Selectize会把原生的<select>元素隐藏，生成一套自己的DOM结构来模拟下拉框。这时候你原来绑定在原生select上的onchange事件虽然还能触发，但直接去拿selectElement.options[selectElement.selectedIndex]的方式已经不适用了——因为Selectize的选择操作不会直接同步原生option的选中状态对应的属性读取逻辑，而且原生option的data-tax-rate也没同步到Selectize的选项数据里。

那怎么改呢？咱们一步步来调整代码：

1. 先补上Selectize的JS引入（你原来只加了CSS，没加核心JS哦） #

<!-- 放在CSS下面或者页面底部的脚本区域 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js"></script>

2. 去掉原生select上的onchange，改用Selectize的事件监听 #

把原来的select标签里的onchange="updateTaxRate(this)"删掉，保持结构干净：

<select name="items[]" class="form-control section">
    <option value="" selected>Choose...</option>
    @foreach ($items as $item)
        <option value="{{ $item->id }}" data-tax-rate="18">{{ $item->name }}</option>
    @endforeach
</select>

3. 初始化Selectize并同步data-tax-rate数据 #

咱们在初始化Selectize的时候，要把原生option的data-tax-rate存到Selectize的选项对象里，再用它自带的change事件来监听选择变化：

document.addEventListener('DOMContentLoaded', function() {
    // 初始化Selectize组件
    const selectizeInstance = document.querySelector('select.section').selectize({
        // 把原生option的属性映射到Selectize的选项数据中
        options: Array.from(document.querySelectorAll('select.section option')).map(option => {
            if (option.value === '') return null;
            return {
                value: option.value,
                text: option.textContent,
                taxRate: option.getAttribute('data-tax-rate')
            };
        }).filter(opt => opt !== null),
        // 保持和原生选项一致的渲染样式
        render: {
            option: function(item, escape) {
                return `<div>${escape(item.text)}</div>`;
            },
            item: function(item, escape) {
                return `<div>${escape(item.text)}</div>`;
            }
        }
    });

    // 绑定Selectize的change事件
    selectizeInstance[0].on('change', function(selectedValue) {
        if (!selectedValue) {
            // 选了默认的"Choose..."就清空税率输入框
            const row = this.$input.closest('tr');
            const taxInput = row.querySelector('.tax_rate');
            if (taxInput) taxInput.value = '';
            return;
        }

        // 从Selectize的选中项里拿到税率
        const selectedItem = this.options[selectedValue];
        const taxRate = selectedItem.taxRate;
        console.log("当前选中项的税率：", taxRate);

        // 找到对应行的税率输入框并更新值
        const row = this.$input.closest('tr');
        const taxInput = row.querySelector('.tax_rate');
        if (taxInput) taxInput.value = taxRate;
    });
});

为啥要这么改？ #

• 初始化Selectize时，我们把原生option的data-tax-rate转成了Selectize选项对象的taxRate属性，这样Selectize内部就存好了这份数据，不用再去操作隐藏的原生元素。
• 用Selectize自带的change事件监听选择，这是官方推荐的方式，能准确拿到用户选中项的所有数据。
• 通过this.$input可以快速定位到原来的原生select元素，再找到对应的表格行，和你原来的逻辑保持一致。

额外小提示 #

如果你原来的data-tax-rate是要从Laravel的$item模型里取真实税率，记得把data-tax-rate="18"改成data-tax-rate="{{ $item->tax_rate }}"哦（看你代码里是硬写的18，应该是示例，提一下以防你忘了）。

现在再测试一下，选下拉框的时候输入框应该就能正确显示税率啦～

备注：内容来源于stack exchange，提问作者Sarabjeet Singh