Javascript 需要在不加载外部url的情况下刷新div内容

我有两个选项列表菜单

你看这里住吗

F-1=状态 F-2=每个状态有2个、3个prodcuts

我想这样做，当有人从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将隐藏所有内容。。。因为我使用包含jquery来匹配F-2中的状态，所以第一次是查找，但第二次是所有状态隐藏其他选定状态，所以包含jquery不起作用

在F-1上应用onchange时是否可以刷新F-2，或者我可以为其执行其他操作，但我无法添加加载外部URL。

这应该可以做到：选择阿拉巴马州，然后选择亚利桑那州

---

我没有时间更新每个元素，但我为.shipping\u state options data state=state\u ABBR添加了另一个属性，并在它们与shipping\u state的值匹配时选择适当的选项。如果您只想缩小可用选项的范围，可以将其更改为使用过滤器。

您可以使用删除方法，该方法将完全删除选项节点。您需要的是使用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();
    });
});

差不多。 对代码的小修改，选项将隐藏而不是删除

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

---

我已经试过这个方法了。。。这不会显示选项的确切大小，当我们从f-1中选择状态时，您可以在此处检查它在选项中显示1，但使用您在选项中向上向下滚动，您可以看到所有。。。但大小问题。我很欣赏，但有2、3个列表选项，状态相同，但产品不同，我想隐藏所有其他选项，这意味着选择albama时，只显示所有albama选项，而不显示其他选项。正如我所说，您可以使用过滤器，并根据该值使用隐藏或显示。使用附加属性将是筛选结果集的最有效方法。我会更新我的示例好的，我已经看到，当选择albama时，它会工作，但是当从f-1中选择另一个时？检查一下。。。在你的例子中。。。它什么也没有显示？亲爱的，这应该适用于所有州，而不仅仅是1或2。。。如果f-1状态与f-2状态匹配，则文本值=显示f-2中的所有匹配状态。每个州都有2到3次f-2选项。我不会为你做所有的事情，只是给你一个如何解决问题的例子。那么选项的大小呢。。。因为它在下拉列表中显示所有状态，但大小未调整。。。必须滚动第二个选项和第三个选项。工作正常，但列表选项的大小如何？当选择albama时，它会显示所有albama，但下拉列表大小不准确。。。你可以检查你的例子…这正是我想要的。。。thanx allot:@AdeelMughal欢迎您乐于帮助：

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

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