1

Есть два выпадающих списка. Нужно сделать так, чтобы, если в первом списке выбран "Челябинск", то во втором выбиралась "Виноградная", если же выбрано любое другое значение, то автоматически выбирался элемент со значением - 0 ("Второй список"). Сейчас, несмотря на условие, все равно всегда выбирается "Виноградная".

$('#edit-field-sity-tid').change(function() {
  var SVal = $(this).find('option:selected').val();
  var c = $('#edit-field-streets').find('option');
  if (SVal == 710) {
    $('.dependent').css('display', 'block');
    c.val(2).attr('selected', 'selected');
  } else {
    c.val(0).attr('selected', 'selected');
    $('.dependent').css('display', 'none');
  }
});
.dependent {
  display: block;
  position: relative;
  background: #8F8F8F;
  margin: 20px;
  color: #fff;
  padding: 7px;
  text-align: center;
}
.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select id="edit-field-sity-tid" name="field_sity_tid" class="form-select">
  <option value="All">Элементы списка</option>
  <option value="708">Златоуст</option>
  <option value="710">Челябинск</option>
</select>
<select id="edit-field-streets" name="field_sity_tid" class="form-select">
  <option value="0">Второй список</option>
  <option value="1">Каштановая</option>
  <option value="2">Виноградная</option>
</select>
<div class="dependent hide">А я тут для проверки условия))</div>

0

1 ответ 1

2

Скорее всего так, или любым другим способом. Разница prop и attr наглядно показана здесь.

$(function() {
  $('#edit-field-sity-tid').on('change', function() {

    var SVal = $(this).val();
    var c = $('#edit-field-streets').find('option');

    if (SVal == 710) {
      c.filter("[value=2]").prop('selected', 'selected');
    } else {
      c.filter("[value=0]").prop('selected', 'selected');
    }

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="edit-field-sity-tid" name="field_sity_tid" class="form-select">
  <option value="All">Элементы списка</option>
  <option value="708">Златоуст</option>
  <option value="710">Челябинск</option>
</select>
<select id="edit-field-streets" name="field_sity_tid" class="form-select">
  <option value="0">Второй список</option>
  <option value="1">Каштановая</option>
  <option value="2">Виноградная</option>
</select>

5
  • забыл я про prop напрочь :(
    – splash58
    25 апр 2016 в 18:35
  • а ведь сталкивался уже с prop. голова моя садовая... Только одну строчку не пойму)) $(this).val(); мы ведь тут к значение селекта обращаемся а его, у селекта нет значений, но почему тогда все работает?)
    – engenes
    25 апр 2016 в 18:36
  • есть у него значение, так вы можете узнать, кто выбран, но не можете установить его для изменения выбора
    – splash58
    25 апр 2016 в 18:37
  • и вот это var c = $('#edit-field-streets').find('option'); тогда уж можно заменить на var c = $('this).find('option'); чтоб еще раз не искать.
    – splash58
    25 апр 2016 в 18:39
  • 1
    @splash58 нет. this относится к первому списку, а в переменную c попадает значение из второго.
    – engenes
    25 апр 2016 в 18:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.