jquery seleccionar menú y anular la selección de otro menú

Hola, tengo dos menús desplegables: precio máximo e hipoteca máxima

Lo quiero para que si un usuario selecciona precio máximo, entonces el valor 'Sin máximo' se muestra en el menú desplegable de hipoteca máxima y viceversa.

Lo hice con el siguiente código, pero parece que solo funciona en Firefox, por lo que Safari, IE9 y Opera no funcionan, ¿alguien puede sugerir una alternativa?

$('#priceMaximum option:not(:first-child)').click(
    function()
    {
        $('#mortgageMaximum option:not(:first-child)').hide();
    }
);

$('#priceMaximum option:first-child').click(
    function()
    {
        $('#mortgageMaximum option').show();
    }
);

$('#mortgageMaximum option:not(:first-child)').click
(
    function()
    {
        $('#priceMaximum option:not(:first-child)').hide();
    }
);

$('#mortgageMaximum option:first-child').click
(
    function()
    {
        $('#priceMaximum option').show();
    }
);

Mi html es el siguiente:

<select name="priceMaximum" id="priceMaximum" class="thin">
    <option value="999999999" selected="selected">No Maximum</option>
    <option value="200000">200.000</option>
    <option value="400000">400.000</option>
    <option value="800000">800.000</option>
    <option value="1200000">1.200.000</option>
    <option value="2400000">2.400.000</option>
    <option value="5000000">5.000.000</option>
    <option value="10000000">10.000.000</option>
</select>

<select name="mortgageMaximum" id="mortgageMaximum" class="thin">
    <option value="999999999" selected="selected">No Maximum</option>
    <option value="300">300</option>
    <option value="500">500</option>
    <option value="750">750</option>
    <option value="1000">1000</option>
    <option value="2000">2000</option>
</select>

preguntado el 12 de junio de 12 a las 14:06

4 Respuestas

Tal vez esto pueda ayudarle:

$('#priceMaximum').change(function(){

   if($(this).val()!='999999999'){
     $('#mortgageMaximum').val('999999999');
   }

});

y viceversa para el otro menú

$('#mortgageMaximum').change(function(){

   if($(this).val()!='999999999'){
     $('#priceMaximum').val('999999999');
   }

});

Respondido el 12 de junio de 12 a las 14:06

Tuve problemas similares con select cajas antes, y el truco es cambiar el evento de click a change

$('#priceMaximum').change(function () { /* do something here */ });

Respondido el 12 de junio de 12 a las 14:06

$(document).ready(function () {

    // put all that stuff here

});

http://api.jquery.com/ready/

Respondido el 12 de junio de 12 a las 14:06

Los navegadores no admiten bien intentar deshabilitar/ocultar las opciones.

Será mejor que elimine las opciones y las vuelva a agregar cuando sea necesario.

Utiliza .remove() y .append()

Respondido el 12 de junio de 12 a las 14:06

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