Show and hide different options when an id is selected

Question

I am trying to show different options when the user selects #im-buying or #im-renting.

This is how my code is set up at the moment, I'm current hiding the .renting class until the user switches the option to #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>

score 0 · Answer 1 · answered Mar 20 '17 at 14:45

Your main issue is that you're hooking the change event on the option elements, when instead it should be placed on the select itself. From there you can check the value property which was chosen and toggle() the appropriate select.

Also note that you only need to create one document.ready handler; all code to be executed once the DOM has loaded can then be placed in that. Try this:

$(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>

thank you also :) both seem to be perfect ways to do this problem i really appreciate it Rory :) — Mayo, Mar 20 '17 at 16:03
@Mayo, ok, to be fair, I think this answer should be accepted, as it was first and had the best logic in it. Indeed I edited a bit my answer to use toggle instead of `if...else`, but that does not mean I didn't knew about the `toggle()`. If you are not convinced to accept it there is a way, you should accept the answer you used in your code. — Ionut Necula, Mar 21 '17 at 07:53

Ionut Necula · Accepted Answer · 2017-03-20T14:55:36.130

Now you're targeting the option from the select. You have to target the select element when using change(). This can also be resumed to one change() method and by using toggle() method:

$(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>

ahhh i see now thats so much easier than i thought, thank you so much makes so much sense now :) really appreicate it! — Mayo, Mar 20 '17 at 16:02

Show and hide different options when an id is selected

2 Answers2