Обновление одного выбора на основе выбора другого выбора

0

У меня есть 2 варианта ввода. Я хочу, чтобы параметры на втором зависели от того, что выбрано на первом.

ПРИМЕР

Выберите 1 - список контента:

  • выбор 1
  • выбор 2

Выберите 2 - список содержимого:

Если я выбираю choice 1 из первого:

  • случай A
  • случай B
  • случай C

Если я выберу choice 2 из первого:

  • случай X
  • случай Y
  • случай Z

Очевидно, что оба входа ввода находятся на одной странице!

Я думаю, что я должен использовать jQuery, но я не знаю, как это сделать.

  • 0
    Является ли раскрывающийся список 2 «подменю» раскрывающегося списка 1 или это отдельный раскрывающийся список? Bootply из того, что у вас есть, было бы полезно. Не уверен, что вы спрашиваете.
  • 0
    Нет ... это два отдельных выпадающих меню, но они на одной странице. Я хочу мгновенно обновить список второго, в зависимости от выбора, который я делаю в первом.
Показать ещё 10 комментариев
Теги:

2 ответа

0

Правильно ли, что вам нужно что-то подобное?

HTML:

<div class="row">
    <div class="span4 offset4">
      <form class="control-group" action="" method="post">
        <!-- DROPDOWN 1 - CHOICE SELECTION -->
        <div class="form-group">
          <select name="document_type" class="form-control input-lg" id="Select1">
            <option value="casea">CHOICE 1</option>
            <option value="caseb">CHOICE 2</option>
            <option value="casec">CHOICE 3</option>
            <option value="cased">CHOICE 4</option>
            <option value="casee">CHOICE 5</option>
          </select>
        </div>
        <!-- DROPDOWN 2 - LIST SELECTION-->
        <div class="form-group">
          <select name="document_type" class="form-control input-lg" id="Select2">
            <option value="casea">CASE A</option>
            <option value="caseb">CASE B</option>
            <option value="casec">CASE C</option>
            <option value="cased">CASE D</option>
            <option value="casee">CASE E</option>
          </select>
        </div>
      </form>
    </div>
</div>

и сценарий что-то вроде этого?

 $(document).ready(function () {
     $.DDCache = {
        init: function (DropDown) {
        this.cache = new Object(DropDown.clone());
     },
     FilterDropDown: function (DropDown, value, condition) {
        DropDown.empty();
        DropDown.append(this.cache.children().clone().toArray());
        DropDown.children("[" + value + "!='" + condition + "']").remove();
     }
  }

  //init the cache for the select you want to filter

  $.DDCache.init($("#Select2"));

   $("#Select1").change(function () {
      $.DDCache.FilterDropDown($("#Select2"), "value", $("#Select1").val());
   });
});

просто создал jsfiddle для вас :)

http://jsfiddle.net/NBuSA/6/

Поделиться
0

У меня просто был код, похожий на код, но не уверен, что это может вам помочь.

$ (document).ready(function() {

$.DDCache = {
    init: function (DropDown) {
        this.cache = new Object(DropDown.clone());
    },
    FilterDropDown: function (DropDown, value, condition) {
        DropDown.empty();
        DropDown.append(this.cache.children().clone().toArray());
        DropDown.children("[" + value + "='" + condition + "']").remove();
    }
}

//init the cache for the select you want to filter

$.DDCache.init($("#Select2"));

$("#Select1").change(function () {
    $.DDCache.FilterDropDown($("#Select2"), "value", $("#Select1").val());
    });

});

С уважением

:)

Поделиться

Ещё вопросы

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