Question

我有2个带有选项的列表菜单

F-1 =国家 F-2 =每个州都有2,3个产品。

当有人从F-1选择任何状态时，我想这样做，那么如果F-2的2或3只显示相同的状态。

实施例：从F-1中选择Albama 用F-2

中的产品展示Albama州

$('#shipping_state').on('change', function() {

    // Do something to refresh F-2 for loading original innerHTML

    var getNme = $('#shipping_state option:selected').text(); // get state text from F-1

    $( ".shipMethod option").not(":contains('" + getNme + "')").each(function(){ // check state is in F-2 exists

        $(this).remove();

    });
});

第一次当我从F-2选择任何状态然后F-2显示精确状态但是当我选择另一个状态然后F-2隐藏所有东西......因为我使用包含jquery来匹配F-2中的状态它第一次发现，但是第二次所有状态都隐藏了其他选定状态，因此包含jquery无效。

当onchange应用于F-1或我可以为其做的其他事情时，是否可以刷新F-2，但我无法添加加载外部URL。

Answer 1

Fiddle Demo

var ship_method = $(".shipMethod");
$('#shipping_state').on('change', function () {
    var getNme = $(this).find('option:selected').text();
    ship_method.find('option').prop('disabled', false);//enable all options
    ship_method.find('option').not(":contains('" + getNme + "')").prop('disabled', true);//disable option not containing getNme
    ship_method.find('option:not([disabled])').first().prop('selected', true);//select 1st enabled option
});

<小时/> Updated Fiddle Demo

var ship_method = $(".shipMethod");
$('#shipping_state').on('change', function () {
    var getNme = $(this).find('option:selected').text();
    ship_method.find('option').show().prop('disabled', false); //enable all options
    ship_method.find('option').not(":contains('" + getNme + "')").hide().prop('disabled', true); //disable option not containing getNme
    ship_method.prepend(ship_method.find('option:not([disabled])')).find('option:eq(0)').prop('selected', true);
});

Answer 2

这应该这样做：http://jsfiddle.net/9WEqD/12/（选择阿拉巴马州，然后选择亚利桑那州）

我没有时间更新每个元素，但我在.shipping_state选项data-state="STATE_ABBR"中添加了另一个属性，并在匹配#shipping_state的值时选择适当的选项。如果您只想缩小可用选项范围，可以将其更改为使用filter。

Answer 3

使用remove（）方法，它完全删除选项节点。你想要的是使用show（）和hide（）方法。

$('#shipping_state').on('change', function() {

// Do something to refresh F-2 for 

var getNme = $('#shipping_state option:selected').text(); // get state text from F-1

$( ".shipMethod option").show();
$( ".shipMethod option").not(":contains('" + getNme + "')").each(function(){ // check state is in F-2 exists
    $(this).hide();
    });
});

Answer 4

像http://jsfiddle.net/9WEqD/7/之类的东西。对代码的小修改，选项是隐藏的而不是删除。

$('#shipping_state').on('change', function() {

    var getNme = $('#shipping_state option:selected').text(); // get state text from F-1

   $( ".shipMethod option").show().not(":contains('" + getNme + "')").hide();//show all then hide
    $("#shipping_method_0").val("");//select empty option by default
});

需要刷新div内容而不加载外部URL

4 个答案: