PHP Каскадный выбор на основе 2 входов - добавьте третий - PullRequest
0 голосов
/ 07 апреля 2020

Я нашел отличный код и подправил его, но теперь мне нужно добавить к нему, и я немного растерялся. Я все еще довольно новичок ie.

Первый выбор поднимает Имя двигателя, второй поднимает модели каждого двигателя. В настоящее время второй выбор перенаправит на указанную c страницу. Я хотел бы третий выбор на основе 2-го. Третий будет перечислять три типа файлов на выбор, и они будут ссылками: step, dwg и pdf.

Может кто-нибудь помочь мне добавить третий выбор, основанный на втором?

Вот ссылка на страницу в реальном времени: введите описание ссылки здесь и вот оригинальный код (спасибо человеку, который его создал!): введите описание ссылки здесь

Вот мой код:

    <h3>Select Engine</h3>
        <form action="" method="post" id="demoForm" class="demoForm">

            <select name="category">
                <option>
                    Select One
                </option>
                <option value="cat">
                    Caterpillar
                </option>
                <option value="cum">
                    Cummins
                </option>
                <option value="det">
                    Detroit Diesel - MTU
                </option>
                <option value="gen">
                    Generac
                </option>
                <option value="koh">
                    Kohler
                </option>
            </select>


            <h4>Select Model</h4>
            <select name="choices[]" id="choices" size="" onchange="javascript:location.href = this.value;">
                <!-- js populates -->
            </select>

        </form>
        <div style="padding-top:60px;padding-bottom:60px;">
            <h2>
                For
                questions,
                please
                contact
                <a href="Sales@inExhaust.com">Sales@inExhaust.com</a>
            </h2>
        </div>
    <?php



<script type="text/javascript">


    // removes all option elements in select list
    // removeGrp (optional) boolean to remove optgroups
    function removeAllOptions(sel, removeGrp) {
        var len, groups, par;
        if (removeGrp) {
            groups = sel.getElementsByTagName('optgroup');
            len = groups.length;
            for (var i=len; i; i--) {
                sel.removeChild( groups[i-1] );
            }
        }

        len = sel.options.length;
        for (var i=len; i; i--) {
            par = sel.options[i-1].parentNode;
            par.removeChild( sel.options[i-1] );
        }
    }

    function appendDataToSelect(sel, obj) {
        var f = document.createDocumentFragment();
        var labels = [], group, opts;

        function addOptions(obj) {
            var f = document.createDocumentFragment();
            var o;

            for (var i=0, len=obj.text.length; i<len; i++) {
                o = document.createElement('option');
                o.appendChild( document.createTextNode( obj.text[i] ) );

                if ( obj.value ) {
                    o.value = obj.value[i];
                }

                f.appendChild(o);
            }
            return f;
        }

        if ( obj.text ) {
            opts = addOptions(obj);
            f.appendChild(opts);
        } else {
            for ( var prop in obj ) {
                if ( obj.hasOwnProperty(prop) ) {
                    labels.push(prop);
                }
            }

            for (var i=0, len=labels.length; i<len; i++) {
                group = document.createElement('optgroup');
                group.label = labels[i];
                f.appendChild(group);
                opts = addOptions(obj[ labels[i] ] );
                group.appendChild(opts);
            }
        }
        sel.appendChild(f);
    }

    // anonymous function assigned to onchange event of controlling select list
    document.forms['demoForm'].elements['category'].onchange = function(e) {
        // name of associated select list
        var relName = 'choices[]';

        // reference to associated select list
        var relList = this.form.elements[ relName ];

        // get data from object literal based on selection in controlling select list (this.value)
        var obj = Select_List_Data[ relName ][ this.value ];

        // remove current option elements
        removeAllOptions(relList, true);

        // call function to add optgroup/option elements
        // pass reference to associated select list and data for new options
        appendDataToSelect(relList, obj);
    };

    // object literal holds data for optgroup/option elements
    var Select_List_Data = {

        // name of associated select list
        'choices[]': {

            // names match option values in controlling select list
            cat: {
                text: ['Select Model', 'C9', 'C15'],
                value: ['#', '/sales', '/sales']
            },
            cum: {
                text: ['DGDB - T1/6BTA5.9-G4', 'DSGAA - T3/QSB7-G7-NR3'],
                value: ['/', '/']
            },
            det: {
                text: ['DS200D6S/JD-6068HFG85', 'DS250D6S/6R1600G70'],
                value: ['/', '/']
            },
            gen: {
                text: ['SD080', 'SD100'],
                value: ['/', '/']
            },
            koh: {
                text: ['REOZJB/6135HFG84', '500REOZVC/Volvo TAD1642GE'],
                value: ['/', '/']
            }
        }

    };

    // populate associated select list when page loads
    window.onload = function() {
        var form = document.forms['demoForm'];

        // reference to controlling select list
        var sel = form.elements['category'];
        sel.selectedIndex = 0;

        // name of associated select list
        var relName = 'choices[]';
        // reference to associated select list
        var rel = form.elements[ relName ];

        // get data for associated select list passing its name
        // and value of selected in controlling select list
        var data = Select_List_Data[ relName ][ sel.value ];

        // add options to associated select list
        appendDataToSelect(rel, data);
    };

</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...