Question

您好我有两个下拉菜单：priceMaximum和mortgageMaximum

我希望如此，如果用户选择priceMaximum，那么loanMaximum dropmenu中会显示'No Maximum'值，反之亦然。

我已经使用以下代码完成了它，但它似乎只适用于Firefox，因此Safari，IE9和Opera不起作用，有人可以提出替代方案吗？

$('#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();
    }
);

我的HTML如下：

<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>

Answer 1

之前我遇到过与select框相似的问题，其诀窍是将事件从click更改为change

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

Answer 2

$(document).ready(function () {

    // put all that stuff here

});

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

Answer 3

浏览器不支持尝试禁用/隐藏选项。

您最好在需要时删除选项并重新添加。

使用.remove()和.append()

Answer 4

也许这可以帮到你：

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

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

});

反之，另一个菜单

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

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

});

jquery选择菜单并取消选择其他菜单

4 个答案: