需要刷新的div内容，而无需加载外部URL

列表菜单

F-1 =美国 F-2 =具有2,3农资每个状态。

我想做的事情，当有人选择F-1中的任何状态，那么F-2将只显示相同的状态，如果它的2或3

例子：从F-1 秀才Albama选择Albama与产品状态的F-2

$('#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隐藏所有的东西......就是因为第1次我使用包含jQuery的匹配状态在F-2和第一次查找，但第二次所有状态隐藏其他然后选定的状态，因此包含jquery不工作ING。

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

来源

2014-02-21 Adeel Mughal

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); 
});

来源

2014-02-21 17:44:31

其工作正常，但列表选项大小呢？当选择阿尔巴马其显示所有的阿尔巴马，但下拉尺寸不确切...你可以检查你的例子... –

@AdeelMughal检查 - >> http://jsfiddle.net/cse_tushar/W9WPf/2/ –

它的确切我想要什么... thanx分配:) –

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

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

来源

2014-02-21 17:24:31

我明白，但有2，同州3个列表选项，但有不同的产品，我想隐藏所有其他，意味着当选择albam它的秀只是所有的阿尔巴马选项而不是其他。 –

就像我说过的，你可以使用'filter'来代替，并使用'hide'或'show'根据该值。使用附加属性将成为过滤结果集的最有效手段。我会更新我的例子 –

好吧，你可以在jsfiddle更新...所以我可以检查 –

您使用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(); 
    }); 
});

来源

2014-02-21 17:24:57 whatisdot

我已经试过这种方法...这不会显示选项的确切大小，你可以在这里查看http://jsfiddle.net/adeelmughal4u/9WEqD/6/当我们从f-1选择状态时，它显示1选项，但使用你在选项中向下滚动，你可以看到所有......但尺寸问题。 –

有点像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 
});

来源

2014-02-21 17:38:24 Wilmer

和选项大小...因为它显示所有状态下拉，但大小没有调整...必须滚动第二个第三选项。 –

需要刷新的div内容，而无需加载外部URL

回答

相关问题