idを選択したときに表示される異なるオプション

Question

ユーザが#im-buyingまたは#im-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

：これを試してみてください。 change()を使用する場合は、select要素をターゲティングする必要があります。また、これは1つの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

あなたの主な問題は、ということであるにオプションを切り替えてまで、私は.rentingクラスを隠し現在だ瞬間に設定されている方法ですoption要素のchangeイベントにフックします。代わりにselectに配置する必要があります。そこから選択されたvalueプロパティとtoggle()が適切なselectを確認することができます。

また、document.readyハンドラを1つだけ作成する必要があります。 DOMがロードされた後に実行されるすべてのコードをその中に配置することができます。今、あなたはselectからoptionをターゲットにしている

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