Необходимо обновить содержимое div без загрузки внешнего URL

0

У меня есть меню "Список" с опциями

Посмотреть live здесь Js Fiddle live

F-1 = состояния F-2 = каждое состояние, имеющее 2, 3 произведения.

Я хочу сделать это, когда кто-то выбирает какое-либо состояние из F-1, тогда F-2 будет показывать только те же состояния, если его 2 или 3.

Пример: выберите Albama из F-1. Покажите только состояния 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();

    });
});

1-й раз, когда я выбираю какое-либо состояние из F-2, тогда F-2 показывает точные состояния, но когда я выбираю другое состояние, тогда F-2 скрывает все вещи... Из-за того, что я использую jquery для соответствия состояний в F-2 и в 1-й раз его нахождение, но в 2 раза все состояния скрывают другие выбранные состояния, поэтому jQuery не работает.

Возможно ли обновить F-2, когда onchange применяется на F-1 или что-то еще, что я могу сделать для него, но я не могу добавить внешний URL загрузки.

Теги:

4 ответа

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);
});
Поделиться
  • 0
    работает нормально, а как насчет размера списка? когда выберите albama, он показывает все albama, но размер выпадающего меню не точен ... вы можете проверить в своем примере ...
  • 0
    @AdeelMughal проверьте это - >> jsfiddle.net/cse_tushar/W9WPf/2
Показать ещё 2 комментария
0

Это должно сделать это: http://jsfiddle.net/9WEqD/12/ (выберите Алабаму, затем Аризону)

У меня нет времени обновлять каждый элемент, но я добавил еще один атрибут в.shipping_state options data-state="STATE_ABBR" и выберите соответствующий параметр, если они соответствуют значению #shipping_state. Вы можете изменить это, чтобы использовать filter если хотите просто сузить доступные параметры.

Поделиться
  • 0
    Я ценю, но есть 2, 3 варианта списка с одинаковыми состояниями, но с разными продуктами, и я хочу скрыть все остальные, то есть, когда выберите «Альбама», он показывает только все параметры «Альбама», а не другие.
  • 0
    Как я уже сказал, вы можете вместо этого использовать filter и использовать hide или show на основе этого значения. Использование дополнительного атрибута будет наиболее эффективным средством фильтрации вашего набора результатов. Я обновлю свой пример
Показать ещё 6 комментариев
0

Вы используете метод 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();
    });
});
Поделиться
  • 0
    я уже попробовал этот метод ... это не покажет точный размер опций, которые вы можете проверить здесь jsfiddle.net/adeelmughal4u/9WEqD/6, когда мы выбираем состояние из f-1, его показывается 1 в опции, но вы используете прокрутку вниз внутри опции Вы можете видеть все ... но проблема размера.
0

Что-то вроде 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
});
Поделиться
  • 0
    а как насчет размера опции ... потому что он показывает все состояния в выпадающем списке, но размер не скорректирован ... нужно прокрутить для 2-го 3-го варианта.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню