{"id":14848,"date":"2023-06-23T13:00:00","date_gmt":"2023-06-23T11:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=14848"},"modified":"2023-06-23T14:24:56","modified_gmt":"2023-06-23T12:24:56","slug":"cambiar-valor-de-un-select-javascript","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/cambiar-valor-de-un-select-javascript\/","title":{"rendered":"Cambiar el valor de un select con JavaScript"},"content":{"rendered":"\n

\u00bfQuieres saber c\u00f3mo cambiar el valor de un select con JavaScript<\/strong>? Bueno, est\u00e1s en el lugar correcto. En este art\u00edculo te explico c\u00f3mo hacerlo de forma sencilla.<\/p>\n\n\n\n

\u00a1Vamos con ello!<\/p>\n\n\n\n

Introducci\u00f3n al elemento Select<\/h2>\n\n\n\n

Los men\u00fas desplegables<\/strong> son un elemento esencial en formularios web, ya que ofrecen al usuario la oportunidad de elegir una opci\u00f3n dentro de una lista. Est\u00e1n compuestos por dos partes principales: el elemento select<\/em> y las opciones<\/strong>. <\/p>\n\n\n\n

El elemento select<\/em> es el contenedor que envuelve a todas las opciones<\/strong>. Dentro de \u00e9l, se encuentran las opciones que representan las diferentes elecciones que puede hacer el usuario.<\/p>\n\n\n\n

En el siguiente ejemplo te muestro un fragmento de c\u00f3digo que puedes copiar y pegar en tu editor de texto favorito y guardarlo en un archivo con extensi\u00f3n .html<\/em>. El resultado es el siguiente:<\/p>\n\n\n\n

\n
\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Document<\/title>\n<\/head>\n<body>\n    <h1>Cambiar el valor de un select con JavaScript<\/h1>\n    <form>\n        <select name=\"opciones\" id=\"opciones\">\n            <option value=\"opcion1\">Opci\u00f3n 1<\/option>\n            <option value=\"opcion2\">Opci\u00f3n 2<\/option>\n            <option value=\"opcion3\">Opci\u00f3n 3<\/option>\n            <option value=\"opcion4\">Opci\u00f3n 4<\/option>\n        <\/select>\n    <\/form>\n<\/body>\n<\/html><\/code><\/pre>\n<\/div>\n\n\n\n
\n
\"modificar
Campo HTML select con cuatro opciones<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Accediendo al elemento Select con JavaScript<\/h2>\n\n\n\n
\n
\n
\"acceder<\/figure>\n<\/div>\n\n\n\n
\n
Para acceder al men\u00fa desplegable desde JavaScript, puedes utilizar el m\u00e9todo document.getElementById()<\/em><\/strong>. Esta funci\u00f3n permite obtener una referencia al elemento select<\/em> empleando su identificador \u00fanico, tambi\u00e9n conocido como \u00abid\u00bb. Por ejemplo, para acceder al elemento select del ejemplo anterior, podr\u00edas usar la siguiente l\u00ednea de c\u00f3digo JavaScript:<\/p>\n\n\n\n
var miMenu = document.getElementById(\"opciones\");<\/code><\/pre>\n\n\n\n
En el c\u00f3digo anterior, \u00abopciones\u00bb es el identificador \u00fanico del men\u00fa desplegable al que se desea acceder. Debes reemplazarlo con el identificador real de tu men\u00fa desplegable.<\/p>\n<\/div>\n<\/div>\n\n\n\n
Una vez se accede al elemento, puedes asignarlo a una variable<\/strong>. En este caso, se ha creado la variable \u00abmiMenu\u00bb. Ello facilitar\u00e1 su manipulaci\u00f3n y te permitir\u00e1 realizar cambios de forma m\u00e1s sencilla.<\/p>\n\n\n\n
Cambiar el valor del elemento Select est\u00e1ticamente<\/h2>\n\n\n\n
En ocasiones, es posible que necesites establecer un valor seleccionado espec\u00edfico en el men\u00fa desplegable al cargar la p\u00e1gina<\/strong>. Esto se conoce como establecer el valor est\u00e1tico<\/strong> del men\u00fa desplegable.<\/p>\n\n\n\n
Para ello, puedes utilizar la propiedad value<\/em> del elemento select<\/em><\/strong>. Esta propiedad contiene el valor de la opci\u00f3n seleccionada. Por ejemplo, siguiendo con el ejemplo anterior, podr\u00edamos emplear el siguiente c\u00f3digo JavaScript para acceder al men\u00fa desplegable y definir est\u00e1ticamente su opci\u00f3n predeterminada al cargar la p\u00e1gina:<\/p>\n\n\n\n
var miMenu = document.getElementById(\"opciones\");\nmiMenu.value= \"opcion3\";<\/code><\/pre>\n\n\n\n
De esta forma, la opci\u00f3n marcada en el men\u00fa desplegable al cargar la p\u00e1gina ser\u00eda la tercera opci\u00f3n del select<\/em>. Por ejemplo:<\/p>\n\n\n\n
\n
\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Document<\/title>\n<\/head>\n<body>\n    <h1>Cambiar el valor de un select con JavaScript<\/h1>\n    <form>\n        <select name=\"opciones\" id=\"opciones\">\n            <option value=\"opcion1\">Opci\u00f3n 1<\/option>\n            <option value=\"opcion2\">Opci\u00f3n 2<\/option>\n            <option value=\"opcion3\">Opci\u00f3n 3<\/option>\n            <option value=\"opcion4\">Opci\u00f3n 4<\/option>\n        <\/select>\n    <\/form>\n    <script>\n        var miMenu = document.getElementById(\"opciones\");\n        miMenu.value= \"opcion3\";\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<\/div>\n\n\n\n
\n
\"cambiar
Select con cuatro opciones, opci\u00f3n 3 predeterminada<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Recuerda que el valor que asignes debe coincidir exactamente con el valor de una de las opciones<\/strong> disponibles en el men\u00fa desplegable. En la pr\u00f3xima secci\u00f3n, te muestro c\u00f3mo cambiar el valor del men\u00fa desplegable din\u00e1micamente en respuesta a eventos o condiciones espec\u00edficas.<\/p>\n\n\n\n
Cambiar el valor del elemento Select din\u00e1micamente<\/h2>\n\n\n\n
\n
\n
\"modificar<\/figure>\n<\/div>\n\n\n\n
\n
Una de las ventajas de utilizar JavaScript es su capacidad para manipular el documento HTML en respuesta a eventos o condiciones espec\u00edficas. Esto permite una experiencia interactiva y personalizada para los usuarios.<\/p>\n\n\n\n
Puedes cambiar el valor seleccionado del men\u00fa desplegable en funci\u00f3n de diversos eventos, como un clic en un bot\u00f3n<\/strong> o la selecci\u00f3n en otro elemento. A continuaci\u00f3n, te muestro c\u00f3mo hacerlo.<\/p>\n<\/div>\n<\/div>\n\n\n\n
Primero, tendr\u00e1s que establecer un escuchador de eventos (event listener<\/em>)<\/strong> en el elemento que desencadenar\u00e1 el cambio. Por ejemplo, si deseas cambiar el valor del men\u00fa desplegable cuando se hace clic en un bot\u00f3n, puedes utilizar el evento click. Siguiendo con el ejemplo anterior, el siguiente c\u00f3digo establece dos botones en HTML que se encargan de seleccionar la primera opci\u00f3n del select<\/em> o la \u00faltima:<\/p>\n\n\n\n
\n
\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Document<\/title>\n<\/head>\n<body>\n    <h1>Cambiar el valor de un select con JavaScript<\/h1>\n    <form>\n        <select name=\"opciones\" id=\"opciones\">\n            <option value=\"opcion1\">Opci\u00f3n 1<\/option>\n            <option value=\"opcion2\">Opci\u00f3n 2<\/option>\n            <option value=\"opcion3\">Opci\u00f3n 3<\/option>\n            <option value=\"opcion4\">Opci\u00f3n 4<\/option>\n            <option value=\"opcion5\">Opci\u00f3n 5<\/option>\n            <option value=\"opcion6\">Opci\u00f3n 6<\/option>\n            <option value=\"opcion7\">Opci\u00f3n 7<\/option>\n            <option value=\"opcion8\">Opci\u00f3n 8<\/option>\n            <option value=\"opcion9\">Opci\u00f3n 9<\/option>\n            <option value=\"opcion10\">Opci\u00f3n 10<\/option>\n        <\/select>\n    <\/form>\n    <button id=\"boton1\">Primera opci\u00f3n<\/button>\n    <button id=\"boton2\">\u00daltima opci\u00f3n<\/button>\n    <script>\n        var miMenu = document.getElementById(\"opciones\");\n        miMenu.value= \"opcion3\";\n        var miBoton1 = document.getElementById(\"boton1\");\n        boton1.addEventListener(\"click\", function(){\n            miMenu.value= \"opcion1\";\n        })\n        var miBoton2 = document.getElementById(\"boton2\");\n        boton2.addEventListener(\"click\", function(){\n            miMenu.value= \"opcion10\";\n        })\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<\/div>\n\n\n\n
\n
\"cambiar
Select con 10 opciones y dos botones que modifican su valor al 1 o al 10<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Con respecto a los ejemplos anteriores, esta nueva versi\u00f3n del c\u00f3digo aporta lo siguiente:<\/p>\n\n\n\n