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

Question

我试图在用户选择 #im-buying 或 #im-renting 时显示不同的选项。

我的代码目前是这样设置的，我目前隐藏 .renting class 直到用户将选项切换到 #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

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

Answer 2

现在您的目标是 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>

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

Show and hide different options when an id is selected

jquery

select

toggle

switch-statement