我的HTML Bootstrap模板有问题。这里我有2个选中的下拉菜单，我想根据这两个选定的值显示结果...我怎么能隐藏所有结果，它只会根据选定的值显示。
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-xs-12 m-t-26">
<h1>Love Compatibility</h1>
<hr>
<p class="elements_desc">
Find out if your partnership will go all the way. Some sun signs naturally work well together,
but others need to compromise to make it work!
</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="sign taurus">
<div class="circle bg-taurus ">
<img src="images/lovecompatibility-icons/taurusl.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-taurus">Taurus</span><br>
<span class="font14">Apr 20 - May 20</span>
</div>
</div>
<div class="sign gemini sign_display">
<div class="circle bg-gemini">
<img src="images/lovecompatibility-icons/geminil.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-gemini">Gemini</span><br>
<span class="font14">May 21 - Jun 20</span>
</div>
</div>
<div class="sign cancer sign_display">
<div class="circle bg-cancer">
<img src="images/lovecompatibility-icons/cancerl.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-cancer">Cancer</span><br>
<span class="font14">Jun 21 - Jul 22</span>
</div>
</div>
<div class="sign leo sign_display">
<div class="circle bg-leo">
<img src="images/lovecompatibility-icons/leol.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-leo">Leo</span><br>
<span class="font14">Jul 23 - Aug 22</span>
</div>
</div>
<div class="sign aries sign_display">
<div class="circle bg-aries">
<img src="images/aries.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-aries">Aries</span><br>
<span class="font14">Mar 21 - Apr 19</span>
</div>
</div>
<div class="sign virgo sign_display">
<div class="circle bg-virgo">
<img src="images/lovecompatibility-icons/virgol.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-virgo">Virgo</span><br>
<span class="font14">Aug 23 - Sep 22</span>
</div>
</div>
<div class="sign libra sign_display">
<div class="circle bg-libra">
<img src="images/lovecompatibility-icons/libral.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-libra">Libra</span><br>
<span class="font14">Sep 23 - Oct 22</span>
</div>
</div>
<div class="sign scorpio sign_display">
<div class="circle bg-scorpio">
<img src="images/lovecompatibility-icons/scorpiol.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-scorpio">Scorpio</span><br>
<span class="font14">Oct 23 - Nov 21</span>
</div>
</div>
<div class="sign sagittarius sign_display">
<div class="circle bg-sagittarius">
<img src="images/lovecompatibility-icons/sagittariusl.png" alt="image-missing"
class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-sagittarius">Sagittarius</span><br>
<span class="font14">Nov 22 - Dec 21</span>
</div>
</div>
<div class="sign capricon sign_display">
<div class="circle bg-capricorn">
<img src="images/lovecompatibility-icons/capricornl.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-capricorn">Capricorn</span><br>
<span class="font14">Dec 22 - Jan 19</span>
</div>
</div>
<div class="sign aquarius sign_display">
<div class="circle bg-aquarius">
<img src="images/lovecompatibility-icons/aquariusl.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-aquarius">Aquarius</span><br>
<span class="font14">Jan 20 - Feb 18</span>
</div>
</div>
<div class="sign pisces sign_display">
<div class="circle bg-pisces">
<img src="images/lovecompatibility-icons/piscesl.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-pisces">Pisces</span><br>
<span class="font14">Feb 19 - Mar 20</span>
</div>
</div>
<div class="footer_select_section">
<select class="form-control love_select" name="zodaic_sign" id="zodaic_sign">
<option value="taurus">Taurus</option>
<option value="aries">Aries</option>
<option value="gemini">Gemini</option>
<option value="cancer">Cancer</option>
<option value="leo">Leo</option>
<option value="virgo">Virgo</option>
<option value="libra">Libra</option>
<option value="scorpio">Scorpio</option>
<option value="sagittarius">Sagittarius</option>
<option value="capricon">Capricorn</option>
<option value="aquarius">Aquarius</option>
<option value="pisces">Pisces</option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-4 heart_div">
<img src="images/lovecompatibility-icons/valentines-heart.png" class="img-responsive heart_image"
alt="image-missing">
</div>
<div class="col-xs-12 col-sm-4">
<div class="sign1 gemini1">
<div class="circle bg-gemini">
<img src="images/lovecompatibility-icons/geminil.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-gemini">Gemini</span><br>
<span class="font14">May 21 - Jun 20</span>
</div>
</div>
<div class="sign1 taurus1 sign_display">
<div class="circle bg-taurus">
<img src="images/lovecompatibility-icons/taurusl.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-taurus">Taurus</span><br>
<span class="font14">Apr 20 - May 20</span>
</div>
</div>
<div class="sign1 cancer1 sign_display">
<div class="circle bg-cancer">
<img src="images/lovecompatibility-icons/cancerl.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-cancer">Cancer</span><br>
<span class="font14">Jun 21 - Jul 22</span>
</div>
</div>
<div class="sign1 leo1 sign_display">
<div class="circle bg-leo">
<img src="images/lovecompatibility-icons/leol.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-leo">Leo</span><br>
<span class="font14">Jul 23 - Aug 22</span>
</div>
</div>
<div class="sign1 aries1 sign_display">
<div class="circle bg-aries">
<img src="images/aries.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-aries">Aries</span><br>
<span class="font14">Mar 21 - Apr 19</span>
</div>
</div>
<div class="sign1 virgo1 sign_display">
<div class="circle bg-virgo">
<img src="images/lovecompatibility-icons/virgol.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-virgo">Virgo</span><br>
<span class="font14">Aug 23 - Sep 22</span>
</div>
</div>
<div class="sign1 libra1 sign_display">
<div class="circle bg-libra">
<img src="images/lovecompatibility-icons/libral.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-libra">Libra</span><br>
<span class="font14">Sep 23 - Oct 22</span>
</div>
</div>
<div class="sign1 scorpio1 sign_display">
<div class="circle bg-scorpio">
<img src="images/lovecompatibility-icons/scorpiol.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-scorpio">Scorpio</span><br>
<span class="font14">Oct 23 - Nov 21</span>
</div>
</div>
<div class="sign1 sagittarius1 sign_display">
<div class="circle bg-sagittarius">
<img src="images/lovecompatibility-icons/sagittariusl.png" alt="image-missing"
class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-sagittarius">Sagittarius</span><br>
<small class="font14">Nov 22 - Dec 21</small>
</div>
</div>
<div class="sign1 capricon1 sign_display">
<div class="circle bg-capricorn">
<img src="images/lovecompatibility-icons/capricornl.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-capricorn">Capricorn</span><br>
<span class="font14">Dec 22 - Jan 19</span>
</div>
</div>
<div class="sign1 aquarius1 sign_display">
<div class="circle bg-aquarius">
<img src="images/lovecompatibility-icons/aquariusl.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-aquarius">Aquarius</span><br>
<span class="font14">Jan 20 - Feb 18</span>
</div>
</div>
<div class="sign1 pisces1 sign_display">
<div class="circle bg-pisces">
<img src="images/lovecompatibility-icons/piscesl.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-pisces">Pisces</span><br>
<span class="font14">Feb 19 - Mar 20</span>
</div>
</div>
<div class="footer_select_section">
<select class="form-control love_select" name="zodaic_sign1" id="zodaic_sign1">
<option value="gemini1">Gemini</option>
<option value="aries1">Aries</option>
<option value="taurus1">Taurus</option>
<option value="cancer1">Cancer</option>
<option value="leo1">Leo</option>
<option value="virgo1">Virgo</option>
<option value="libra1">Libra</option>
<option value="scorpio1">Scorpio</option>
<option value="sagittarius1">Sagittarius</option>
<option value="capricon1">Capricon</option>
<option value="aquarius1">Aquarius</option>
<option value="pisces1">Pisces</option>
</select>
</div>
</div>
</div>
<div class="row m-t-26">
<div class="col-xs-12 text-center wow pulse" data-wow-duration="1s" data-wow-delay="0.1s">
<a href="love_compatibility_result.html" class="btn btn-md btn-primary ">Get Your Compatibility</a>
</div>
</div>
答案 0 :(得分：1)
您可以为 zodaic_sign 选择使用更改事件。
在下面的代码段中，每行都有注释。
$('#zodaic_sign').on('change', function (e) {
//
// get the current selected text
//
var selValue = $(this).find('option:selected').text();
//
// get the anchestor col
//
var anchestor = $(this).closest('.col-xs-12.col-sm-4');
//
// hide all elements
//
anchestor.find('.sign').hide();
//
// show the element containing the selected zodiac sign
//
anchestor.find('.sign:contains(' + selValue + ')').show();
}).trigger('change');
//
// see to the previous handler....
//
$('#zodaic_sign1').on('change', function (e) {
var selValue = $(this).find('option:selected').text();
var anchestor = $(this).closest('.col-xs-12.col-sm-4');
anchestor.find('.sign1').hide();
anchestor.find('.sign1:contains(' + selValue + ')').show();
}).trigger('change');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-xs-12 m-t-26">
<h1>Love Compatibility</h1>
<hr>
<p class="elements_desc">
Find out if your partnership will go all the way. Some sun signs naturally work well together,
but others need to compromise to make it work!
</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="sign taurus">
<div class="circle bg-taurus ">
<img src="images/lovecompatibility-icons/taurusl.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-taurus">Taurus</span><br>
<span class="font14">Apr 20 - May 20</span>
</div>
</div>
<div class="sign gemini sign_display">
<div class="circle bg-gemini">
<img src="images/lovecompatibility-icons/geminil.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-gemini">Gemini</span><br>
<span class="font14">May 21 - Jun 20</span>
</div>
</div>
<div class="sign cancer sign_display">
<div class="circle bg-cancer">
<img src="images/lovecompatibility-icons/cancerl.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-cancer">Cancer</span><br>
<span class="font14">Jun 21 - Jul 22</span>
</div>
</div>
<div class="sign leo sign_display">
<div class="circle bg-leo">
<img src="images/lovecompatibility-icons/leol.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-leo">Leo</span><br>
<span class="font14">Jul 23 - Aug 22</span>
</div>
</div>
<div class="sign aries sign_display">
<div class="circle bg-aries">
<img src="images/aries.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-aries">Aries</span><br>
<span class="font14">Mar 21 - Apr 19</span>
</div>
</div>
<div class="sign virgo sign_display">
<div class="circle bg-virgo">
<img src="images/lovecompatibility-icons/virgol.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-virgo">Virgo</span><br>
<span class="font14">Aug 23 - Sep 22</span>
</div>
</div>
<div class="sign libra sign_display">
<div class="circle bg-libra">
<img src="images/lovecompatibility-icons/libral.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-libra">Libra</span><br>
<span class="font14">Sep 23 - Oct 22</span>
</div>
</div>
<div class="sign scorpio sign_display">
<div class="circle bg-scorpio">
<img src="images/lovecompatibility-icons/scorpiol.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-scorpio">Scorpio</span><br>
<span class="font14">Oct 23 - Nov 21</span>
</div>
</div>
<div class="sign sagittarius sign_display">
<div class="circle bg-sagittarius">
<img src="images/lovecompatibility-icons/sagittariusl.png" alt="image-missing"
class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-sagittarius">Sagittarius</span><br>
<span class="font14">Nov 22 - Dec 21</span>
</div>
</div>
<div class="sign capricon sign_display">
<div class="circle bg-capricorn">
<img src="images/lovecompatibility-icons/capricornl.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-capricorn">Capricorn</span><br>
<span class="font14">Dec 22 - Jan 19</span>
</div>
</div>
<div class="sign aquarius sign_display">
<div class="circle bg-aquarius">
<img src="images/lovecompatibility-icons/aquariusl.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-aquarius">Aquarius</span><br>
<span class="font14">Jan 20 - Feb 18</span>
</div>
</div>
<div class="sign pisces sign_display">
<div class="circle bg-pisces">
<img src="images/lovecompatibility-icons/piscesl.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-pisces">Pisces</span><br>
<span class="font14">Feb 19 - Mar 20</span>
</div>
</div>
<div class="footer_select_section">
<select class="form-control love_select" name="zodaic_sign" id="zodaic_sign">
<option value="taurus">Taurus</option>
<option value="aries">Aries</option>
<option value="gemini">Gemini</option>
<option value="cancer">Cancer</option>
<option value="leo">Leo</option>
<option value="virgo">Virgo</option>
<option value="libra">Libra</option>
<option value="scorpio">Scorpio</option>
<option value="sagittarius">Sagittarius</option>
<option value="capricon">Capricorn</option>
<option value="aquarius">Aquarius</option>
<option value="pisces">Pisces</option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-4 heart_div">
<img src="images/lovecompatibility-icons/valentines-heart.png" class="img-responsive heart_image"
alt="image-missing">
</div>
<div class="col-xs-12 col-sm-4">
<div class="sign1 gemini1">
<div class="circle bg-gemini">
<img src="images/lovecompatibility-icons/geminil.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-gemini">Gemini</span><br>
<span class="font14">May 21 - Jun 20</span>
</div>
</div>
<div class="sign1 taurus1 sign_display">
<div class="circle bg-taurus">
<img src="images/lovecompatibility-icons/taurusl.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-taurus">Taurus</span><br>
<span class="font14">Apr 20 - May 20</span>
</div>
</div>
<div class="sign1 cancer1 sign_display">
<div class="circle bg-cancer">
<img src="images/lovecompatibility-icons/cancerl.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-cancer">Cancer</span><br>
<span class="font14">Jun 21 - Jul 22</span>
</div>
</div>
<div class="sign1 leo1 sign_display">
<div class="circle bg-leo">
<img src="images/lovecompatibility-icons/leol.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-leo">Leo</span><br>
<span class="font14">Jul 23 - Aug 22</span>
</div>
</div>
<div class="sign1 aries1 sign_display">
<div class="circle bg-aries">
<img src="images/aries.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-aries">Aries</span><br>
<span class="font14">Mar 21 - Apr 19</span>
</div>
</div>
<div class="sign1 virgo1 sign_display">
<div class="circle bg-virgo">
<img src="images/lovecompatibility-icons/virgol.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-virgo">Virgo</span><br>
<span class="font14">Aug 23 - Sep 22</span>
</div>
</div>
<div class="sign1 libra1 sign_display">
<div class="circle bg-libra">
<img src="images/lovecompatibility-icons/libral.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-libra">Libra</span><br>
<span class="font14">Sep 23 - Oct 22</span>
</div>
</div>
<div class="sign1 scorpio1 sign_display">
<div class="circle bg-scorpio">
<img src="images/lovecompatibility-icons/scorpiol.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-scorpio">Scorpio</span><br>
<span class="font14">Oct 23 - Nov 21</span>
</div>
</div>
<div class="sign1 sagittarius1 sign_display">
<div class="circle bg-sagittarius">
<img src="images/lovecompatibility-icons/sagittariusl.png" alt="image-missing"
class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-sagittarius">Sagittarius</span><br>
<small class="font14">Nov 22 - Dec 21</small>
</div>
</div>
<div class="sign1 capricon1 sign_display">
<div class="circle bg-capricorn">
<img src="images/lovecompatibility-icons/capricornl.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-capricorn">Capricorn</span><br>
<span class="font14">Dec 22 - Jan 19</span>
</div>
</div>
<div class="sign1 aquarius1 sign_display">
<div class="circle bg-aquarius">
<img src="images/lovecompatibility-icons/aquariusl.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-aquarius">Aquarius</span><br>
<span class="font14">Jan 20 - Feb 18</span>
</div>
</div>
<div class="sign1 pisces1 sign_display">
<div class="circle bg-pisces">
<img src="images/lovecompatibility-icons/piscesl.png" alt="image-missing" class="rotate">
</div>
<div class="card text-center main">
<span class="font24 text-pisces">Pisces</span><br>
<span class="font14">Feb 19 - Mar 20</span>
</div>
</div>
<div class="footer_select_section">
<select class="form-control love_select" name="zodaic_sign1" id="zodaic_sign1">
<option value="gemini1">Gemini</option>
<option value="aries1">Aries</option>
<option value="taurus1">Taurus</option>
<option value="cancer1">Cancer</option>
<option value="leo1">Leo</option>
<option value="virgo1">Virgo</option>
<option value="libra1">Libra</option>
<option value="scorpio1">Scorpio</option>
<option value="sagittarius1">Sagittarius</option>
<option value="capricon1">Capricon</option>
<option value="aquarius1">Aquarius</option>
<option value="pisces1">Pisces</option>
</select>
</div>
</div>
</div>
<div class="row m-t-26">
<div class="col-xs-12 text-center wow pulse" data-wow-duration="1s" data-wow-delay="0.1s">
<a href="love_compatibility_result.html" class="btn btn-md btn-primary ">Get Your Compatibility</a>
</div>
</div>
</div>
</div>