w2p cascade selects

by mjbeller

HTML

<select id="type">
    <option value="1">Type1</option>
    <option value="2">Type2</option>
</select>
<br>
<select id="category">
    <option value=""></option>
    <option value="1">1*Type1 / Cat1</option>
    <option value="2">1*Type1 / Cat2</option>
    <option value="3">2*Type2 / Cat1</option>
    <option value="4">2*Type2 / Cat2</option>
</select>
<br>
<select id="subcategory">
    <option value=""></option>
    <option value="1">1*Type1 / Cat1 / Subcat1</option>
    <option value="2">1*Type1 / Cat1 / Subcat2</option>
    <option value="3">1*Type1 / Cat1 / Subcat3</option>
    <option value="4">2*Type1 / Cat2 / Subcat1</option>
    <option value="5">2*Type1 / Cat2 / Subcat2</option>
    <option value="6">2*Type1 / Cat2 / Subcat3</option>
    <option value="7">3*Type2 / Cat1 / Subcat1</option>
    <option value="8">3*Type2 / Cat1 / Subcat2</option>
    <option value="9">3*Type2 / Cat1 / Subcat3</option>
    <option value="10">4*Type2 / Cat2 / Subcat1</option>
    <option value="11">4*Type2 / Cat2 / Subcat2</option>
    <option value="12">4*Type2 / Cat2 / Subcat3</option>
</select>
<br>
<input class="btn btn-primary" type="submit" value="Submit" />

CSS

.asd {
    background: orange;
    color: green;
}

JavaScript

/*
 * Chained - jQuery / Zepto chained selects plugin
 *
 * Copyright (c) 2010-2014 Mika Tuupola
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Project home:
 *   http://www.appelsiini.net/projects/chained
 *
 * Version: 1.0.0
 *
 */

;
(function ($, window, document, undefined) {
    "use strict";

    $.fn.chained = function (parent_selector) {

        return this.each(function () {

            /* Save this to child because this changes when scope changes. */
            var child = this;
            var backup = $(child).clone();

            /* Handles maximum two parents now. */
            $(parent_selector).each(function () {
                $(this).bind("change", function () {
                    updateChildren();
                });

                /* Force IE to see something selected on first page load, */
                /* unless something is already selected */
                if (!$("option:selected", this).length) {
                    $("option", this).first().attr("selected", "selected");
                }

                /* Force updating the children. */
                updateChildren();
            });

            function updateChildren() {
                var trigger_change = true;
                var currently_selected_value = $("option:selected", child).val();

                $(child).html(backup.html());

                /* If multiple parents build classname like foo\bar. */
                var selected = "";
                $(parent_selector).each(function () {
                    var selectedClass = $("option:selected", this).val();
                    if (selectedClass) {
                        if (selected.length > 0) {
                            if (window.Zepto) {
                                /* Zepto class regexp dies with classes like foo\bar. */
                                selected += "\\\\";
                            } else {
                               ...