CODEWITHSUNDEEP
javascriptjquery
Adeel Mughal
Adeel Mughal

Reputation: 736

Need to refresh div content without loading external url

I have 2 List menu with options

See live here Js Fiddle live

F-1 = States F-2 = Each state having 2, 3 prodcuts.

I want to do that when someone select any state from F-1 then F-2 will just show same states if its 2 or 3.

Example: Select Albama from F-1 Show just Albama states with products in 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();

    });
});

1st time when i select any state from F-2 then F-2 show exact states but when i select another state then F-2 hide all things... Its because i use contains jquery for matching states in F-2 and 1st time its find but 2nd time all states hide other then selected states so contains jquery not working.

Is it possible to refresh F-2 when onchange apply on F-1 or something else i can do for it, but i cannot add load external URL.

Upvotes: 0

Views: 167

Answers (4)

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

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

Upvotes: 1

Rob M.
Rob M.

Reputation: 36511

This should do it: http://jsfiddle.net/9WEqD/12/ (select Alabama, then Arizona)

I don't have time to update each element, but I added another attribute to the .shipping_state options data-state="STATE_ABBR" and select the appropriate option when they match the value of #shipping_state. You could change this to use filter if you just want to narrow down the available options.

Upvotes: 0

user2571870
user2571870

Reputation:

Something like http://jsfiddle.net/9WEqD/7/. Small modification to your code, option are hidden instead of removed.

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

Upvotes: 0

whatisdot
whatisdot

Reputation: 26

You use the remove() method, which deletes the option nodes entirely. What you want is to use the show() and hide() methods.

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

Upvotes: 0

Related Questions