Question

我搜索并挖掘并找到了我认为会有所帮助的答案，但从未这样做过。
我只是无法让这个工作。我已经问了一个关于这个问题的问题，我被引导到其他地方并且仍然没有骰子。

        <br>Make:<br>
        <select id="make" name="make" required>
            <option value="default">Select make...</option>
            <option class="alfaRomeo" value="alfaRomeo">Alfa Romeo</option>
            <option class="abarth" value="abarth">Abarth</option>
            <option class="astonMartin" value="astonMartin">Aston Martin</option>
            <option class="audi" value="audi">Audi</option>
            <option class="ford" value="ford">Ford</option>
        </select><br>

        <br>Model:<br>
        <select id="model" name="model" required>
            <option value="default">Select Model...</option>
            <!--ALFA ROMEO-->
            <option value="4cSpider" class="selectors alfaRomeo">4C Spider</option>
            <option value="4c" class="selectors alfaRomeo">4C</option>
            <option value="giulQuad" class="selectors alfaRomeo">Giulietta Quadrifoglio Verde</option>
            <option value="giulietta" class="selectors alfaRomeo">Giulietta</option>
            <option value="mitoQuad" class="selectors alfaRomeo">MiTo Quadrifoglio</option>
            <option value="mito" class="selectors alfaRomeo">MiTo</option>
            <!--FORD-->
            <option value="focus" class="selectors ford">Focus</option>
            <option value="f350" class="selectors ford">F-350</option>
        </select><br>

        <script>

            $(document).ready(function () {    
                var allOptions = $('#model option')
                $('#make').change(function () {
                    $('#model option').remove()
                    var classN = $('#make option:selected').prop('class');
                    var opts = allOptions.filter('.' + classN);
                    $.each(opts, function (i, j) {
                        $(j).appendTo('#model');
                    });
                });
            });

        </script>

Answer 1

这不仅仅是错字吗？

appendTo('#mdoel');

要在此脚本之前添加的jQuery链接

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Answer 2

最简单的方法是根据product-name and price选择中所选选项的类显示/隐藏选项。但是，这在IE中不起作用，因为它不支持隐藏#make元素。

然后你可以做的是克隆原始选项，然后将过滤后的选项附加到第二个选择：

option

演示： http://jsfiddle.net/u1ah58jz/

Answer 3

此处的一个解决方案是将模型的选项转换为JSON数据，然后在make更改时动态加载列表。 Fiddle here。

<br>Make:<br>
<select id="make" name="make" required>
    <option value="default">Select make...</option>
    <option class="alfaRomeo" value="alfaRomeo">Alfa Romeo</option>
    <option class="abarth" value="abarth">Abarth</option>
    <option class="astonMartin" value="astonMartin">Aston Martin</option>
    <option class="audi" value="audi">Audi</option>
    <option class="arrinera" value="arrinera">Arrinera</option>
    <option class="acura" value="acura">Acura</option>
    <option class="ford" value="ford">Ford</option>
</select><br>

<br>Model:<br>
<select id="model" name="model" required>
    <option value="default">Select Model...</option>
</select><br>

脚本：

var models = [
    { "make": "alfaRomeo", "value": "4cSpider",  "text": "4C Spider" },
    { "make": "alfaRomeo", "value": "4c",        "text": "4C" },
    { "make": "alfaRomeo", "value": "giulQuad",  "text": "Giulietta Quadrifoglio Verde" },
    { "make": "alfaRomeo", "value": "giulietta", "text": "Giulietta" },
    { "make": "alfaRomeo", "value": "mitoQuad",  "text": "MiTo Quadrifoglio" },
    { "make": "alfaRomeo", "value": "mito",      "text": "MiTo" },
    { "make": "ford",      "value": "focus",     "text": "Focus" },
    { "make": "ford",      "value": "f350",      "text": "F-350" }
];


$('#make').change(function () {
    var select = $("#model");
    var make = $(this).val();

    //Clear all options
    select.find('option').remove();

    //add relevant options
    for (var i=0; i < models.length; i++) {
        if (models[i].make == make)
            $("<option />")
            .attr("value", models[i].value)
            .text(models[i].text)
            .appendTo(select);
    }
});

如何使此下拉类别与我的其他下拉类别相对应？

3 个答案: