Я пытаюсь показать разные варианты, когда пользователь выбирает #im-buying или #im-renting.

Вот как мой код настроен на данный момент, сейчас я скрываю класс .renting, пока пользователь не переключит опцию на #im-buying

$(function() {
  $('#im-buying').change(function() {
    $('.renting').hide();
    $('.buying').show();
  });
});

$(function() {
  $('#im-renting').change(function() {
    $('.buying').hide();
    $('.renting').show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option id="im-buying" value="BUY A PROPERTY">Buy a property</option>
  <option id="im-renting" value="RENT A PROPERTY">Rent a property</option>
</select>


<h4>
  <strong>MIN PRICE:</strong>
</h4>
<select class="buying">
  <option value="not specific">Not Specific</option>
  <option value="MIN PRICE">£40,000</option>
  <option value="MIN PRICE">£50,000</option>
  <option value="MIN PRICE">£60,000</option>
  <option value="MIN PRICE">£70,000</option>
  <option value="MIN PRICE">£80,000</option>
  <option value="MIN PRICE">£90,000</option>
  <option value="MIN PRICE">£100,000</option>
  <option value="MIN PRICE">£110,000</option>
  <option value="MIN PRICE">£120,000</option>
  <option value="MIN PRICE">£130,000</option>
  <option value="MIN PRICE">£140,000</option>
  <option value="MIN PRICE">£150,000</option>
  <option value="MIN PRICE">£200,000</option>
  <option value="MIN PRICE">£300,000</option>
  <option value="MIN PRICE">£400,000</option>
  <option value="MIN PRICE">£500,000</option>
  <option value="MIN PRICE">£600,000</option>
  <option value="MIN PRICE">£700,000+</option>
</select>

<select class="renting">
  <option value="not specific">Not Specific</option>
  <option value="MAX PRICE">£250</option>
  <option value="MAX PRICE">£450</option>
  <option value="MAX PRICE">£600</option>
  <option value="MAX PRICE">£700</option>
  <option value="MAX PRICE">£800</option>
  <option value="MAX PRICE">£1000</option>
  <option value="MAX PRICE">£1100</option>
  <option value="MAX PRICE">£1200</option>
  <option value="MAX PRICE">£1400</option>
</select>
1
Mayo 20 Мар 2017 в 17:39

2 ответа

Лучший ответ

Теперь вы нацеливаетесь на option из select. Вы должны использовать целевой элемент select при использовании change(). Это также можно возобновить одним методом change() и с помощью метода toggle():

$(function() {
  $('#main_select').change(function() {
    $('.renting').toggle($(this).val() == 'RENT A PROPERTY');
    $('.buying').toggle($(this).val() == 'BUY A PROPERTY');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="main_select">
              <option selected disabled>Select an option</option>
              <option id="im-buying" value="BUY A PROPERTY">Buy a property</option>
              <option id="im-renting" value="RENT A PROPERTY">Rent a property</option>
          </select>


<h4><strong>MIN PRICE:</strong></h4>
<select class="buying">
            <option value="not specific">Not Specific buying</option>
            <option value="MIN PRICE">£40,000</option>
            <option value="MIN PRICE">£50,000</option>
            <option value="MIN PRICE">£60,000</option>
            <option value="MIN PRICE">£70,000</option>
            <option value="MIN PRICE">£80,000</option>
            <option value="MIN PRICE">£90,000</option>
            <option value="MIN PRICE">£100,000</option>
            <option value="MIN PRICE">£110,000</option>
            <option value="MIN PRICE">£120,000</option>
            <option value="MIN PRICE">£130,000</option>
            <option value="MIN PRICE">£140,000</option>
            <option value="MIN PRICE">£150,000</option>
            <option value="MIN PRICE">£200,000</option>
            <option value="MIN PRICE">£300,000</option>
            <option value="MIN PRICE">£400,000</option>
            <option value="MIN PRICE">£500,000</option>
            <option value="MIN PRICE">£600,000</option>
            <option value="MIN PRICE">£700,000+</option>
          </select>

<select class="renting">
            <option value="not specific">Not Specific renting</option>
            <option value="MAX PRICE">£250</option>
            <option value="MAX PRICE">£450</option>
            <option value="MAX PRICE">£600</option>
            <option value="MAX PRICE">£700</option>
            <option value="MAX PRICE">£800</option>
            <option value="MAX PRICE">£1000</option>
            <option value="MAX PRICE">£1100</option>
            <option value="MAX PRICE">£1200</option>
            <option value="MAX PRICE">£1400</option>
          </select>
0
Ionut Necula 20 Мар 2017 в 14:55

Ваша главная проблема заключается в том, что вы подключаете событие change к элементам option, когда вместо этого оно должно быть помещено в сам select. Оттуда вы можете проверить выбранное свойство value и toggle() соответствующее select.

Также обратите внимание, что вам нужно создать только один обработчик document.ready; весь код, который будет выполнен после загрузки DOM, может быть помещен в него. Попробуй это:

$(function() {
  $('#type').change(function() {
    $('.renting').toggle(this.value == 'rent');
    $('.buying').toggle(this.value == 'buy');
  }).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="type">
  <option value="buy">Buy a property</option>
  <option value="rent">Rent a property</option>
</select>

<h4>
  <strong>MIN PRICE:</strong>
</h4>
<select class="buying">
  <option value="not specific">Not Specific</option>
  <option value="MIN PRICE">£40,000</option>
  <option value="MIN PRICE">£50,000</option>
  <option value="MIN PRICE">£60,000</option>
  <option value="MIN PRICE">£70,000</option>
  <option value="MIN PRICE">£80,000</option>
  <option value="MIN PRICE">£90,000</option>
  <option value="MIN PRICE">£100,000</option>
  <option value="MIN PRICE">£110,000</option>
  <option value="MIN PRICE">£120,000</option>
  <option value="MIN PRICE">£130,000</option>
  <option value="MIN PRICE">£140,000</option>
  <option value="MIN PRICE">£150,000</option>
  <option value="MIN PRICE">£200,000</option>
  <option value="MIN PRICE">£300,000</option>
  <option value="MIN PRICE">£400,000</option>
  <option value="MIN PRICE">£500,000</option>
  <option value="MIN PRICE">£600,000</option>
  <option value="MIN PRICE">£700,000+</option>
</select>

<select class="renting">
  <option value="not specific">Not Specific</option>
  <option value="MAX PRICE">£250</option>
  <option value="MAX PRICE">£450</option>
  <option value="MAX PRICE">£600</option>
  <option value="MAX PRICE">£700</option>
  <option value="MAX PRICE">£800</option>
  <option value="MAX PRICE">£1000</option>
  <option value="MAX PRICE">£1100</option>
  <option value="MAX PRICE">£1200</option>
  <option value="MAX PRICE">£1400</option>
</select>
0
Rory McCrossan 20 Мар 2017 в 14:45