如何修改Symfony表单中select标签的name属性？

问题分析 #

你尝试用setAttribute()修改第一个select的name属性但未生效，核心原因是DOM属性与HTML属性的同步差异：直接访问element.name获取的是DOM对象的属性，而setAttribute()操作的是HTML标签上的属性，部分情况下两者不会即时同步，导致修改不生效。

解决方案 #

直接修改DOM对象的name属性即可，无需使用setAttribute()，调整后的代码如下：

idcounter = 1;
const wishedlanguageselect = document.getElementById("user_wishedlanguages___name__");
// 直接修改DOM的name属性，替代setAttribute
wishedlanguageselect.name = wishedlanguageselect.name.replace('__name__', '0');
const wishedlanguageslist = document.getElementById('wishedlanguageslist');

document.getElementById("addwishedlanguage").onclick = function() {
    idcounter++
    const newwishedlanguageselect = wishedlanguageselect.cloneNode(true);
    newwishedlanguageselect.setAttribute('name', 'user[wishedlanguages][' + idcounter + ']')
    document.getElementById('wishedlanguageslist').appendChild(newwishedlanguageselect);
    document.getElementById("removewishedlanguage").style.display = "initial";
}

document.getElementById("removewishedlanguage").onclick = function() {
    idcounter--
    wishedlanguageslist.removeChild(wishedlanguageslist.lastElementChild);
    if(idcounter === 1) {
        document.getElementById("removewishedlanguage").style.display = "none";
    }
}

额外注意事项 #

• 确保代码在DOM完全加载后执行：可以把脚本放在</body>标签前，或者包裹在DOMContentLoaded事件中，避免因元素未加载导致获取不到wishedlanguageselect元素。
• 你后续基于原型克隆新元素的逻辑是手动设置name，修改后的原型name不会影响新增元素的命名规则。

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