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

时间：2017-03-20 14:39:19

标签： jquery select switch-statement toggle

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

这就是我的代码目前的设置方式，我当前正在隐藏.renting类，直到用户将选项切换为#im-buying

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

$(function() {
  $('#im-renting').change(function() {
    $('.buying').hide();
    $('.renting').show();
  });
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

您的主要问题是您在option元素上挂钩select事件，而应将其置于value本身。在那里，您可以查看已选择的toggle()属性和select相应的$(function() { $('#type').change(function() { $('.renting').toggle(this.value == 'rent'); $('.buying').toggle(this.value == 'buy'); }).change(); });。

另请注意，您只需创建一个document.ready处理程序;然后，一旦DOM加载就要执行的所有代码都可以放在那里。试试这个：

<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>
heightConstraint

答案 1 :(得分：0)

现在，您要从option定位select。使用select时，您必须定位change()元素。这也可以恢复为一个change()方法并使用toggle()方法：

＆＃13;
＆＃13; 
$(function() {
  $('#main_select').change(function() {
    $('.renting').toggle($(this).val() == 'RENT A PROPERTY');
    $('.buying').toggle($(this).val() == 'BUY A PROPERTY');
  });
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题