Javascript 隐藏第二个下拉列表，直到在第一个下拉列表中进行选择

我相信这个问题以前已经被回答过了，但不幸的是，所提供的答案对我不起作用。 （我对Jquery/Javascript相当陌生）

我用这个来解决我的问题

这是我的HTML：

<div id="EU-selector">
    <p>For EU:</p>
    <div class="dropdown" id="arrowdown">
        <select name="eu-model" id="eu-model">
            <option value="">Select your model:</option>
            <option value="1">Beetle</option>
            <option value="2">Caddy4</option>
            <option value="3">CC</option>
            <option value="4">E-Golf</option>
            <option value="5">Eos</option>
            <option value="6">Golf 7</option>
            <option value="7">Golf Cabrio</option>
            <option value="8">Golf GTI</option>
            <option value="9">Golf R</option>
            <option value="10">Golf Sportsvan</option>
            <option value="11">Golf Variant</option>
            <option value="12">Jetta</option>
            <option value="13">Passat</option>
            <option value="14">Polo</option>
            <option value="15">Scirocco</option>
            <option value="16">Sharan</option>
            <option value="17">T6</option>
            <option value="18">Tiguan</option>
            <option value="19">Touran</option>
        </select>
        <div class="eu-year">
            <div class="beetle">
                <select class="beetle-year">
                    <option value="">Select your year:</option>
                    <option value="1">2015</option>
                </select>
            </div>
            <div class="caddy4">
                <select class="caddy4-year">
                    <option value="">Select your year:</option>
                    <option value="1">2015</option>
                </select>
            </div>
        </div>
    </div>
</div>

谁能告诉我哪里出了问题？ 非常感谢您的帮助

谢谢

布拉德

试试这个

HTML

CSS

---

使用此代码，我根据模型选择器中的值选择年份，方法是使用

数据值

属性。嗯，即使在JSFIDLE中，它似乎也不起作用=/在你的页面上尝试一下，我刚刚在一个干净的文档中做了，它成功了：）还要确保你的css不会破坏你的任何东西，尝试禁用除我发布的css之外的所有css，看看脚本是否按预期工作，然后编辑样式它不能在小提琴中工作的原因是因为你没有包含jquery。尝试通过粘贴此

https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js

然后按+Ahhh我看到了！非常感谢！我想是我的下拉css影响了它。再次感谢！

$(document).ready(function() {
$('#eu-model').bind('change', function() {
    var elements = $('div.eu-year').children().hide();
    var value = $(this).val();

    if (value.length) { 
        elements.filter('.' + value).show(); 
    }
}).trigger('change');
})

<div id="EU-selector">
    <p>For EU:</p>
    <div class="dropdown" id="arrowdown">
        <select name="eu-model" id="eu-model">
            <option value="">Select your model:</option>
            <option value="1">Beetle</option>
            <option value="2">Caddy4</option>
            <option value="3">CC</option>
            <option value="4">E-Golf</option>
            <option value="5">Eos</option>
            <option value="6">Golf 7</option>
            <option value="7">Golf Cabrio</option>
            <option value="8">Golf GTI</option>
            <option value="9">Golf R</option>
            <option value="10">Golf Sportsvan</option>
            <option value="11">Golf Variant</option>
            <option value="12">Jetta</option>
            <option value="13">Passat</option>
            <option value="14">Polo</option>
            <option value="15">Scirocco</option>
            <option value="16">Sharan</option>
            <option value="17">T6</option>
            <option value="18">Tiguan</option>
            <option value="19">Touran</option>
        </select>
        <div class="eu-year">
            <div data-value="1">
                <select>
                    <option value="">Select your year of your Beetle:</option>
                    <option value="1">2015</option>
                </select>
            </div>
            <div data-value="2">
                <select>
                    <option value="">Select your year of your Caddy4:</option>
                    <option value="1">2015</option>
                </select>
            </div>
        </div>
    </div>
</div>

$(document).ready(function() {
    $('#eu-model').on('change', function() {
        if (this.value.length) {
            $('.eu-year > div').hide();
            $('.eu-year > div[data-value="' + this.value + '"').show();
        }
    });
})

.eu-year > div {
    display: none;
}