使用 Javascript 修改选择字段选项

Question

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

逻辑：

• 使用“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);
                    }
                }


        }

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

http://i.imgur.com/B0eHS.png

目前我的代码无法运行，并且出现 Javascript 错误：

无法转换 JavaScript 参数 arg 0 [nsIDOMHTMLInputElement.appendChild] [打破此错误] selectfield.appendChild(option);

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

谢谢

Answer 1

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

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