javascript根据2个不同的选择下拉值显示结果

Question

我的 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>

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