[SOLUCIONADO] Seleccionar opción en todos los select

[linuxchucho]

Hola, quisiera que me ayudaran en como puedo hacer que todos los select de mi formulario cambien a una option al dar click en un boton.

ya logre realizarlo pero solo lo hace en 1 y necesito cambiarlo en todos los select de mi formulario o al menos todos los select que tengan el mismo ID"Status", gracias

Código HTML:

<script>

function App() {
    document.getElementById('Status').value = 'App';
}
function Rech() {
    document.getElementById('Status').value = 'Rech';
}
</script>



<button onclick='App()'>Aprobada</button>
<button onclick='Rech()'>Rech</button>

<select name='Status' id='Status'>
		 <option value='ok' selected>ok</option> 
		 <option value='App'>App</option>
		 <option value='Rech'>Rech</option>
		 </select> 

[alexg88]

Buenas,

No puede haber más de un elemento con el mismo id, por eso getElementById devuelve un elemento como mucho y no varios.

Para poder cambiar varios elementos tendrás que usar clases por ejemplo:

Código HTML:

<script type="text/javascript">
function Select(value) 
{
    var elements =  document.getElementsByClassName('Status');
    var i;
    
    for (i = 0; i < elements.length; i++)
    {
        elements[i].value = value;
    }
}
</script>
<button onclick='Select("App")'>Aprobada</button>
<button onclick='Select("Rech")'>Rech</button>
 
<select name='Status' class='Status'>
         <option value='ok' selected>ok</option> 
         <option value='App'>App</option>
         <option value='Rech'>Rech</option>
</select>
 

Si va a usarse en IE8 y versiones anteriores, tienes que utilizar una librería como JQuery para realizar la búsqueda por clase o buscar una versión de la función getElementsByClassName que funcione en estos navegadores.

Un saludo.

[Alexis88]

Deberías de utilizar solo una función para hacer esto, la cual recibiría dos parámetros: El identificador de la lista y el valor a buscar.

Código HTML:

<button onclick = "fn('Status', 'App')">Aprobada</button>
<button onclick = "fn('Status', 'Rech')">Rech</button>
 
<select name = 'Status' id = 'Status'>
    <option value='ok' selected>ok</option> 
    <option value='App'>App</option>
    <option value='Rech'>Rech</option>
</select>
 

Código Javascript:

function fn(id, val){
    var select = document.getElementById(id);  
    for (var i = 0, l = select.options.length; i < l; i++){
        if (select.options[i].value == val){
            select.options[i].selected = true;
            break;
        }
    }
}
 

Lo que hago es simple. La lista de opciones es la misma que tienes, pero, en los botones al dar clic en cualquiera de ellos, invoco a una función a la cual le paso dos parámetros: El identificador de la lista y el valor a buscar.

En la función, recibo a ambos valores, tomo a la lista por su identificador y, con ayuda de un bucle, busco entre las opciones de la lista el valor que coincida con el que estamos buscando. En caso de encontrarlo, se selecciona la opción correspondiente y se termina el bucle. Por cierto, si planeas trabajar con varias listas, no debes de utilizar el mismo id para todas pues debe de ser un valor único en todo el documento. En su lugar, puedes usar una clase o un array de listas.

Saludos

Edito: La solución de alexg88, me ha dado una idea:

Código Javascript:

function fn(clase, valor){
    for (var i = 0, listas = document.querySelectorAll("." + clase), l = listas.length; i < l; listas[i].value = valor, i++);
}
 

Tomas al conjunto de listas por su clase, recorres el conjunto obtenido y le asignas a cada una el valor buscado. La selección de la opción equivalente será automática.

P.D.: No me había fijado de que querías que el cambio se produzca en varias listas a la vez.

[IsaBelM]

Iniciado por alexg88

Si va a usarse en IE8 y versiones anteriores, tienes que utilizar una librería como JQuery para realizar la búsqueda por clase o buscar una versión de la función getElementsByClassName que funcione en estos navegadores.

Un saludo.

sólo a modo de apunte. polyfill

if(!document.getElementsByClassName) {

document.getElementsByClassName = function(className){
var regex = new RegExp(className);
var array = [];
var element = arguments[1] || document.documentElement;
for(var elem = element.firstChild; elem != null; elem = elem.nextSibling) {
if(elem.nodeType != 1)continue;
if(regex.test(elem.className)) array.push(elem);
if(elem.hasChildNodes()) array = array.concat(arguments.callee(className, elem));
}
return array;
}
}

[linuxchucho]

Muchas gracias, tema resuelto.

[alexg88]

Muchas gracias por el apunte IsaBelM, me refería justamente a eso, quizás tenía que haber especificado más.

Un saludo.