Используйте выбор из выпадающего списка, чтобы заполнить содержимое второго выпадающего списка

Question

Приведенный ниже код заполняет первый выпадающий список различными брендами брюк:

$.each(pantsBrands, function(i){
    var li = $('<li>')
        .appendTo(pantsList);
    var aaa = $('<a>')
        .text(pantsBrands[i])
        .attr('onclick','askPantStyle()')
        .appendTo(li);
});

В этом следующем фрагменте кода я намереваюсь каким-то образом использовать вышеуказанный выбор, чтобы заполнить содержимое во втором раскрывающемся списке, состоящем из стилей, относящихся к бренду, выбранному в первом.

var askPantStyle = function(){
    $('#pantStyleDiv').slideDown();
    alert($(this).text());
}

Я использовал предупреждение, чтобы проверить, что (это) вернется. Я надеялся, что это будет текстовое содержимое первого выбора, но когда появится окно с предупреждением, содержимое будет пустым.

соответствующий HTML ниже:

<div id='pantsLanding'>
            <p class="lead">Which brand of pants fits you best?</p>
            <p class="lead">
                <!-- Split button -->
                <div class="btn-group">
                    <button type="button" class="btn btn-default">Brand</button>
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul id="dropPants" class="dropdown-menu scrollable-menu" role="menu">
                    </ul>
                </div>
            </p>  
        </div>
        <div id='pantStyleDiv'>
            <p class="lead">What style do you prefer?</p>
            <p class="lead">
                <!-- Split button -->
                <div class="btn-group">
                    <button type="button" class="btn btn-default">Style</button>
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul id="dropPantStyle" class="dropdown-menu scrollable-menu" role="menu">
                    </ul>
                </div>
            </p>  
        </div>

Answer 1

Ниже приведен быстрый пример того, как вы можете решить эту проблему. Раскрывающиеся страницы Bootstrap довольно специфичны для их использования, поэтому я использую click событие, а не change это нормальное событие для избранных.

$('#dropPants').on('click', 'li a', function() { ... });

Также я не добавил никаких атрибутов данных, так как у меня нет полной картины вашего решения. Но я надеюсь, что вы можете использовать это, чтобы заставить вещи работать так, как вы этого хотите.

Вы не предоставили никаких данных, поэтому я создал массив для брендов и объект для стилей. Каждый бренд имеет свойство в объекте, содержащем массив стилей.

var pantsBrands = ['levis', 'lee', 'lindeberg'];
var pantsStyles = { 
        'levis': ['501','502'],
        'lee': ['bruce','kim'],
        'lindeberg': ['lindeberg1','lindeberg2']
};

---

В любом случае, ниже приведен рабочий пример раскрывающегося списка Bootstrap:

var pantsBrands = ['levis','lee','lindeberg'];
var pantsStyles = { 'levis': ['501','502'],
                    'lee': ['bruce','kim'],
                    'lindeberg': ['lindeberg1','lindeberg2']
                  };

$.each(pantsBrands, function(i) {
  $('#dropPants').append('<li><a href="#">'+pantsBrands[i]+'</a></li>');
});

$('#dropPants').on('click', 'li a', function() {
  $('#dropPantStyle').html('');
  var showStyles = pantsStyles[$(this).text()];
  $.each(showStyles, function(i) {
    $('#dropPantStyle').append('<li><a href="#">'+showStyles[i]+'</a></li>');
  });   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div id='pantsLanding'>
  <p class="lead">Which brand of pants fits you best?</p>
  <p class="lead">
    <!-- Split button -->
    <div class="btn-group">
      <button type="button" class="btn btn-default">Brand</button>
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul id="dropPants" class="dropdown-menu scrollable-menu" role="menu">
      </ul>
    </div>
  </p>
</div>
<div id='pantStyleDiv'>
  <p class="lead">What style do you prefer?</p>
  <p class="lead">
    <!-- Split button -->
    <div class="btn-group">
      <button type="button" class="btn btn-default">Style</button>
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul id="dropPantStyle" class="dropdown-menu scrollable-menu" role="menu">
      </ul>
    </div>
  </p>
</div>