使用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]   [Break On此错误] selectfield.appendChild（option）;

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

由于

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);