选择 id 时显示和隐藏不同的选项

Question

当用户选择#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>

Answer 1

现在您从select 定位option。使用change() 时，您必须定位select 元素。这也可以恢复到一个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>

Answer 2

您的主要问题是您将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>