Modificar opciones de campo Seleccionar usando JavaScript

Question

Estoy tratando de crear una función JavaScript que tome el valor de un campo seleccionado y luego lo use para comparar una matriz JSON. Si algún elemento de matriz coincide con el valor seleccionado del usuario, la función agregará esos valores a otro campo seleccionar.

Lógica:

• Activar la función usando el atributo HTML "Onchange"
• Obtenga el valor seleccionado por el usuario del campo Seleccionar
• Compare este valor con la matriz JSON
• Si el valor de la matriz == Valor seleccionado, agregue a otro campo Seleccionar

Código:

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


        }

Aquí hay una captura de pantalla que muestra los dos campos de selección (el que está en la parte superior afectará las opciones de campos de selección inferior)

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

Por el momento en que mi código no funciona y recibo un error de JavaScript:

No se pudo convertir el argumento de JavaScript arg 0 [nsidomhtmlinputelement.appendChild] [romper en este error] selectField.appendChild (opción);

También me pregunto cómo podría hacer que Javscript actualice el campo Seleccionar de todos los valores y luego repoblarlo. Esto evitaría una gran acumulación de opciones duplicadas cada vez que se llama a la función.

Gracias

Answer 1

appendChild toma un elemento, no una cadena. Seleccionar opciones tiene un constructor para ayudarlo:

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