Question

我相信这个问题已经得到了回答，但不幸的是，所提供的答案对我来说并不适用。（我对Jquery / Javascript很新）

我正在使用此jsfiddle #1来尝试解决我的问题。

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

所以基本上，当你选择一个模型时，它会显示“年份”。落下。我希望为系统＆＃39;添加另一个下拉列表（第3层）。但我想先克服这个障碍。

我已在此jsfiddle #2

中添加了我的CSS

此外，.dropdownarrow的CSS应该翻转向下箭头图像（无法找到如何上传 - 也许你可以＆＃t; t？）点击向上箭头，但留下＆＃ 39;有源＆＃39;直到您单击下拉菜单（或选择一个选项 - 然后转到第二个下拉菜单）。

这里的HTML代码包含在HTML代码中（稍后我将把它移到它自己的.js文件中）

$(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');
})

有人可以告诉我哪里出错吗？非常感谢所有帮助！

谢谢，

布拉德

Answer 1

试试这个

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

的Javascript

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

CSS

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

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

1 个答案: