javascript基于2个不同的选择下拉值显示结果

javascript基于2个不同的选择下拉值显示结果,javascript,jquery,html,twitter-bootstrap,Javascript,Jquery,Html,Twitter Bootstrap,我的HTML引导模板有问题。在这里,我有2个选择下拉菜单,我想显示基于这两个选择值的结果…我如何隐藏所有结果,它将仅显示基于选择值 <div class="row"> <div class="col-md-8"> <div class="row"> <div class="col-xs-12 m-t-26"> <h1>Love Compatibility</h1>

我的HTML引导模板有问题。在这里,我有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>

爱情相容性

看看你的合作关系是否会一直持续下去。一些太阳星座自然会协同工作, 但其他人需要妥协才能让它发挥作用!

金牛座
四月二十日至五月二十日 双子座
五月二十一日至六月二十日 癌症
六月二十一日至七月二十二日 狮子座
七月二十三日至八月二十二日 白羊座
3月21日至4月19日 处女座
8月23日至9月22日 天秤座
九月二十三日至十月二十二日 天蝎座 10月23日至11月21日 人马座
11月22日至12月21日 摩羯座
12月22日至1月19日 水瓶座
一月二十日至二月十八日 双鱼座
二月十九日至三月二十日 金牛座 白羊座 双子座 巨蟹座 狮子座 处女座 天秤座 天蝎座 人马座 摩羯座 水瓶座 双鱼座 双子座
五月二十一日至六月二十日 金牛座
四月二十日至五月二十日 癌症
六月二十一日至七月二十二日 狮子座
七月二十三日至八月二十二日 白羊座
3月21日至4月19日 处女座
8月23日至9月22日 天秤座
九月二十三日至十月二十二日 天蝎座 10月23日至11月21日 人马座
11月22日至12月21日 摩羯座
12月22日至1月19日 水瓶座
一月二十日至二月十八日 双鱼座
二月十九日至三月二十日 双子座 白羊座 金牛座 巨蟹座 狮子座 处女座 天秤座 天蝎座 人马座 凯普里康 水瓶座 双鱼座
您可以对两个zodaic_符号选择使用更改事件

在下面的snipp中