Cambiar dos elementos seleccionados al cambiar el primero

I have three select items like this:

 <select name="select1" id="select1">
 <option value="1">Item 1</option>
 <option value="2">Item 2</option>
 <option value="3">Item 3</option>
 </select>

 <select name="select2" id="select2">
 <option value="1">Item 1 second</option>
 <option value="2">Item 2 second</option>
 <option value="3">Item 3 second</option>
 </select>

 <select name="select3" id="select3">
 <option value="1">Item 1 third</option>
 <option value="2">Item 2 third</option>
 <option value="3">Item 3 third</option>
 </select>

With the following code I achieved to change the second select element:

 <script type="text/javascript">//<![CDATA[ 
 $(window).load(function(){
 $("#select1").change(function() { 
 if($(this).data('options') == undefined){
 /*Taking an array of all options-2 and kind of embedding it on the select1*/
 $(this).data('options',$('#select2 option, #select3 option').clone());
 } 
 var id = $(this).val();
 var options = $(this).data('options').filter('[value=' + id + ']');
 $('#select2, #select3').html(options);
 });

 });//]]>  
 </script>

VER DEMOSTRACIÓN: http://jsfiddle.net/MNs9t/

This works fine, except that I want to change the options in select3 as well to the chosen item from select 1. So I tried the following code:

 <script type="text/javascript">//<![CDATA[ 
 $(window).load(function(){
 $("#select1").change(function() { 
 if($(this).data('options') == undefined){
 /*Taking an array of all options-2 and kind of embedding it on the select1*/
 $(this).data('options',$('#select2 option, #select3 option').clone());
 } 
 var id = $(this).val();
 var options = $(this).data('options').filter('[value=' + id + ']');
 $('#select2, #select3').html(options);
 });

 });//]]>  
 </script>

But this will display all the options from select2 and select3 in both select items. I want to do the same thing in select3 as in select2... Can someone help?

VER DEMOSTRACIÓN: [http://jsfiddle.net/MNs9t/1/][2]

preguntado el 26 de noviembre de 13 a las 23:11

It is hard to see a corralation between your code and what you want to accomplish, might just be me though. Could you explain an example of what vaules you want in the boxes? -

id="select1" three times... a copiar pegar error tipográfico -

2 Respuestas

One problem I can see is you are trying to save the options reference from both select2 and select3 using the same key in select1.

var $select2 = $('#select2'), $select3 = $('#select3');
$("#select1").change(function () {
    var id = $(this).val();

    if ($select2.data('options') == undefined) {
        $select2.data('options', $select2.find('option').clone());
    }
    var options = $select2.data('options').filter('[value=' + id + ']');
    $select2.html(options);

    if ($select3.data('options') == undefined) {
        $select3.data('options', $select3.find('option').clone());
    }
    var options = $select3.data('options').filter('[value=' + id + ']');
    $select3.html(options);
});

Demostración: Violín

respondido 27 nov., 13:00

¿Algo como eso?

JS- jsFiddle

$("#select1").change(function() {
    var se = $(this).prop('selectedIndex');
    $("#select2").prop('selectedIndex',se);
    $("#select3").prop('selectedIndex',se);
});

¿O algo así?

JS- jsFiddle

$("#select1").change(function() {
    var va = $(this).val();
    $("#select2").val(va);
    $("#select3").val(va);
});

I dont know what you really looking for :)

Respondido el 20 de junio de 20 a las 10:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.