使用Javascript修改选择字段选项

我试图创建一个Javascript函数，该函数将从一个select字段中获取值，然后使用该值来比较JSON数组。如果任何数组元素与用户选择的值匹配，则函数将把这些值添加到另一个选择字段中

逻辑：

//this function modifies a select field depending on what value was selected by its predecessor
        function tariffs()
        {   
            //variable selection equals the selected value chosen by the user in that field
            var selection = document.getElementById('tariff_net').options[document.getElementById('tariff_net').selectedIndex].value

            //for loop to go through JSON values to compare with the value chosen by the user
            for(var i = 0; i < values.preset_name.length ; i++)
                {
                    //if the JSON value equals the user selected value
                  if (values.preset_name[i] == selection)
                    {   
                        //append it to the "tariff_name" select field
                        var option = values.preset_name[i];
                        var selectfield = document.getElementById('tariff_name');
                        selectfield.appendChild(option);
                    }
                }


        }

• 使用“onchange”HTML属性激活函数
• 从“选择”字段获取用户选择的值
• 将此值与JSON数组进行比较
• 如果数组值==所选值，则附加到其他选择字段

代码：

//this function modifies a select field depending on what value was selected by its predecessor
        function tariffs()
        {   
            //variable selection equals the selected value chosen by the user in that field
            var selection = document.getElementById('tariff_net').options[document.getElementById('tariff_net').selectedIndex].value

            //for loop to go through JSON values to compare with the value chosen by the user
            for(var i = 0; i < values.preset_name.length ; i++)
                {
                    //if the JSON value equals the user selected value
                  if (values.preset_name[i] == selection)
                    {   
                        //append it to the "tariff_name" select field
                        var option = values.preset_name[i];
                        var selectfield = document.getElementById('tariff_name');
                        selectfield.appendChild(option);
                    }
                }


        }

//此函数根据前一个字段选择的值修改选择字段
职能关税（）
{   
//变量选择等于用户在该字段中选择的选定值
var selection=document.getElementById（'tariff_net'）。选项[document.getElementById（'tariff_net'）。selectedIndex]。值
//for循环通过JSON值与用户选择的值进行比较
对于（变量i=0；i

这是显示两个选择字段的屏幕截图（顶部的一个将影响底部的选择字段选项）

目前，我的代码不起作用，我收到一个Javascript错误：

无法转换JavaScript参数arg 0[nsIDOMHTMLInputElement.appendChild] [在此错误时中断]选择Field.appendChild（选项）

我还想知道如何让Javscript刷新所有值的select字段，然后重新填充它。这将防止在调用函数时大量累积重复选项

谢谢

接受元素，而不是字符串。“选择选项”有一个构造函数来帮助您：

var option = new Option(values.preset_name[i]); //Dom element instead of a string
var selectfield = document.getElementById('tariff_name');
selectfield.appendChild(option);

---

你能发布一篇文章来展示你到目前为止所做的尝试吗？@DavidThomas我可以试试，但问题是我的字段是用PHP生成的，我的json也是如此。然后试试看你是否能尽可能地模仿静态HTML/JS。我知道这并不理想，但如果不了解情况，就很难提供帮助。而且，在没有Ajax的情况下再现问题时，您至少知道了错误来自何处。您的小提琴仍然是错误的：第一个select元素是自动关闭的，并且没有“关税名称”元素。在“Choose framework”的左侧也使用了“No wrap（head）”。这解决了这个问题，谢谢，所以我没有意识到传递给dom的任何东西都需要转换为对象/元素。现在说得通了！谢谢你！知道如何清除选择字段吗？每次我运行这个函数？