javascript - 怎样用js修改ant design , ant-select的值？

Question

看起来肯定是ant-design的组件了，

<div class="ant-select-selection__rendered"><div ecid="_Route@vmt0lk_Comp@upn4fo_FormContent@g9f33k_MainLayout@kdmfyn_LayoutTr@ds2cqb@main_0_CellType@27chqt@main_4_6_FieldContent@r045n3_SelectElement@gubx9o_WeaSelect@vm269g_SelectNew@rj15to_RcSelect@8nckz1_div@xrcc1x" class="ant-select-selection-selected-value" title="4" style="display: block; opacity: 1;">4</div></div><input ecid="_Route@vmt0lk_Comp@upn4fo_FormContent@g9f33k_MainLayout@kdmfyn_LayoutTr@ds2cqb@main_0_CellType@27chqt@main_4_6_FieldContent@r045n3_SelectElement@gubx9o_WeaSelect@vm269g_input@ah4dw0" type="hidden" name="field221877" id="field221877" value="4">

它下面有个input的值，但是我修改Input的值，input的值变了。显示的值并不变，相关的验证也不会触发。

怎样用js来修改ant-select的值。。

原因是我要批量填表，测试一次要手动选20个select太痛苦了。用了一些表单工具都填不了这个select。

Answer 1

你可以通过操纵 DOM 来修改 Ant Design Select 组件的值。下面是一个基本的示例，使用了 jQuery 库：

$(document).ready(function() {    // 假设你的 Select 组件的 class 是 'ant-select-selection-selected-value'    $('.ant-select-selection-selected-value').each(function() {        // 获取当前选中的值        var currentValue = $(this).text();        // 修改为你需要的新值        $(this).text('你的新值');        // 如果需要，你还可以把新值存储到 input 元素中        $('#field221877').val('你的新值');    });});

这段代码会修改页面上所有 Ant Design Select 组件的当前选中值。如果你只想修改特定的一个，你可以使用 $(this).val('你的新值') 替换掉 $(this).text('你的新值')。

需要注意的是，这个方法只改变了 Ant Design Select 组件的显示值，并没有触发任何验证。如果你需要触发验证，可能需要手动调用验证函数，或者使用表单的 onValuesChange 回调（如果你使用了这个功能）。

另外，这个代码使用了 jQuery，如果你的项目中没有使用 jQuery，你需要先引入 jQuery 库。