how to create a drill down search menu on a website











up vote
-2
down vote

favorite












I am trying to set up a website (i have used a bootstrap template and made some changes to it). I want a search function on top of the page where you can select a product but then there will be another drop down.



For example one search box, which is a drop down menu will have a list of vehicles; audi bmw and Mercedes. if you select Audi i want the drop down next to it to only show model that belong to the audi range and so on.



Also for forward planning; if a new model vehicle releases for audi how would i then add this to my list?



----------------UPDATE---------------



I managed to do some research and got the code working kind of.
I have incorporated JS in my website. I've got the first drop down to work but the second drop down does not run?






 $('.dropdown')function configureDropDownLists(ddl1,ddl2) {

        var Audi = new Array('A1', 'S1', 'RS3');

        var BMW = new Array('3 series', '5 series', 'M5');

        var Ford = new Array('A Class', 'C Class', 'E class');

    

        switch (ddl1.value) {

            case 'Audi':

                ddl2.options.length = 0;

                for (i = 0; i < Audi.length; i++) {

                    createOption(ddl2, Audi[i], Audi[i]);

                }

                break;

            case 'BMW':

                ddl2.options.length = 0; 

            for (i = 0; i < BMW.length; i++) {

                createOption(ddl2, BMW[i], BMW[i]);

                }

                break;

            case 'Ford':

                ddl2.options.length = 0;

                for (i = 0; i < Ford.length; i++) {

                    createOption(ddl2, Ford[i], Ford[i]);

                }

                break;

                default:

                    ddl2.options.length = 0;

                break;

        }



    }



    $('.dropdown2')function createOption(ddl, text, value) {

        var opt = document.createElement('option');

        opt.value = value;

        opt.text = text;

        ddl.options.add(opt);

    }

    <select class="dropdown" id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">

                                        <option value=""></option>

                                        <option value="Audi">Audi</option>

                                        <option value="BMW">BMW</option>

                                        <option value="Ford">Ford</option>

                                    </select>

                                    

                                    <select id="ddl2">

                                    </select>








jquery html css







share|improve this question
























  • what you are communicating about is not dropdown menu. it is more or less like a tree view. like in windows explorer. except that you are not asking for a trailing line from the root.
    – vssadineni
    Nov 21 at 13:37










  • And this is not the right place for ideating. Instead work on it and if you have some code and got stuck anyone from 'SO' can help you with it.
    – vssadineni
    Nov 21 at 13:44










  • @HaseebMohammed. Would a dropdown that opened another dropdown be useful, like this: w3schools.com/bootstrap/…
    – user2796515
    Nov 21 at 14:05

















up vote
-2
down vote

favorite












I am trying to set up a website (i have used a bootstrap template and made some changes to it). I want a search function on top of the page where you can select a product but then there will be another drop down.



For example one search box, which is a drop down menu will have a list of vehicles; audi bmw and Mercedes. if you select Audi i want the drop down next to it to only show model that belong to the audi range and so on.



Also for forward planning; if a new model vehicle releases for audi how would i then add this to my list?



----------------UPDATE---------------



I managed to do some research and got the code working kind of.
I have incorporated JS in my website. I've got the first drop down to work but the second drop down does not run?






 $('.dropdown')function configureDropDownLists(ddl1,ddl2) {

        var Audi = new Array('A1', 'S1', 'RS3');

        var BMW = new Array('3 series', '5 series', 'M5');

        var Ford = new Array('A Class', 'C Class', 'E class');

    

        switch (ddl1.value) {

            case 'Audi':

                ddl2.options.length = 0;

                for (i = 0; i < Audi.length; i++) {

                    createOption(ddl2, Audi[i], Audi[i]);

                }

                break;

            case 'BMW':

                ddl2.options.length = 0; 

            for (i = 0; i < BMW.length; i++) {

                createOption(ddl2, BMW[i], BMW[i]);

                }

                break;

            case 'Ford':

                ddl2.options.length = 0;

                for (i = 0; i < Ford.length; i++) {

                    createOption(ddl2, Ford[i], Ford[i]);

                }

                break;

                default:

                    ddl2.options.length = 0;

                break;

        }



    }



    $('.dropdown2')function createOption(ddl, text, value) {

        var opt = document.createElement('option');

        opt.value = value;

        opt.text = text;

        ddl.options.add(opt);

    }

    <select class="dropdown" id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">

                                        <option value=""></option>

                                        <option value="Audi">Audi</option>

                                        <option value="BMW">BMW</option>

                                        <option value="Ford">Ford</option>

                                    </select>

                                    

                                    <select id="ddl2">

                                    </select>








jquery html css







share|improve this question
























  • what you are communicating about is not dropdown menu. it is more or less like a tree view. like in windows explorer. except that you are not asking for a trailing line from the root.
    – vssadineni
    Nov 21 at 13:37










  • And this is not the right place for ideating. Instead work on it and if you have some code and got stuck anyone from 'SO' can help you with it.
    – vssadineni
    Nov 21 at 13:44










  • @HaseebMohammed. Would a dropdown that opened another dropdown be useful, like this: w3schools.com/bootstrap/…
    – user2796515
    Nov 21 at 14:05















up vote
-2
down vote

favorite









up vote
-2
down vote

favorite











I am trying to set up a website (i have used a bootstrap template and made some changes to it). I want a search function on top of the page where you can select a product but then there will be another drop down.



For example one search box, which is a drop down menu will have a list of vehicles; audi bmw and Mercedes. if you select Audi i want the drop down next to it to only show model that belong to the audi range and so on.



Also for forward planning; if a new model vehicle releases for audi how would i then add this to my list?



----------------UPDATE---------------



I managed to do some research and got the code working kind of.
I have incorporated JS in my website. I've got the first drop down to work but the second drop down does not run?






 $('.dropdown')function configureDropDownLists(ddl1,ddl2) {

        var Audi = new Array('A1', 'S1', 'RS3');

        var BMW = new Array('3 series', '5 series', 'M5');

        var Ford = new Array('A Class', 'C Class', 'E class');

    

        switch (ddl1.value) {

            case 'Audi':

                ddl2.options.length = 0;

                for (i = 0; i < Audi.length; i++) {

                    createOption(ddl2, Audi[i], Audi[i]);

                }

                break;

            case 'BMW':

                ddl2.options.length = 0; 

            for (i = 0; i < BMW.length; i++) {

                createOption(ddl2, BMW[i], BMW[i]);

                }

                break;

            case 'Ford':

                ddl2.options.length = 0;

                for (i = 0; i < Ford.length; i++) {

                    createOption(ddl2, Ford[i], Ford[i]);

                }

                break;

                default:

                    ddl2.options.length = 0;

                break;

        }



    }



    $('.dropdown2')function createOption(ddl, text, value) {

        var opt = document.createElement('option');

        opt.value = value;

        opt.text = text;

        ddl.options.add(opt);

    }

    <select class="dropdown" id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">

                                        <option value=""></option>

                                        <option value="Audi">Audi</option>

                                        <option value="BMW">BMW</option>

                                        <option value="Ford">Ford</option>

                                    </select>

                                    

                                    <select id="ddl2">

                                    </select>








jquery html css







share|improve this question















I am trying to set up a website (i have used a bootstrap template and made some changes to it). I want a search function on top of the page where you can select a product but then there will be another drop down.



For example one search box, which is a drop down menu will have a list of vehicles; audi bmw and Mercedes. if you select Audi i want the drop down next to it to only show model that belong to the audi range and so on.



Also for forward planning; if a new model vehicle releases for audi how would i then add this to my list?



----------------UPDATE---------------



I managed to do some research and got the code working kind of.
I have incorporated JS in my website. I've got the first drop down to work but the second drop down does not run?






 $('.dropdown')function configureDropDownLists(ddl1,ddl2) {

        var Audi = new Array('A1', 'S1', 'RS3');

        var BMW = new Array('3 series', '5 series', 'M5');

        var Ford = new Array('A Class', 'C Class', 'E class');

    

        switch (ddl1.value) {

            case 'Audi':

                ddl2.options.length = 0;

                for (i = 0; i < Audi.length; i++) {

                    createOption(ddl2, Audi[i], Audi[i]);

                }

                break;

            case 'BMW':

                ddl2.options.length = 0; 

            for (i = 0; i < BMW.length; i++) {

                createOption(ddl2, BMW[i], BMW[i]);

                }

                break;

            case 'Ford':

                ddl2.options.length = 0;

                for (i = 0; i < Ford.length; i++) {

                    createOption(ddl2, Ford[i], Ford[i]);

                }

                break;

                default:

                    ddl2.options.length = 0;

                break;

        }



    }



    $('.dropdown2')function createOption(ddl, text, value) {

        var opt = document.createElement('option');

        opt.value = value;

        opt.text = text;

        ddl.options.add(opt);

    }

    <select class="dropdown" id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">

                                        <option value=""></option>

                                        <option value="Audi">Audi</option>

                                        <option value="BMW">BMW</option>

                                        <option value="Ford">Ford</option>

                                    </select>

                                    

                                    <select id="ddl2">

                                    </select>








 $('.dropdown')function configureDropDownLists(ddl1,ddl2) {

        var Audi = new Array('A1', 'S1', 'RS3');

        var BMW = new Array('3 series', '5 series', 'M5');

        var Ford = new Array('A Class', 'C Class', 'E class');

    

        switch (ddl1.value) {

            case 'Audi':

                ddl2.options.length = 0;

                for (i = 0; i < Audi.length; i++) {

                    createOption(ddl2, Audi[i], Audi[i]);

                }

                break;

            case 'BMW':

                ddl2.options.length = 0; 

            for (i = 0; i < BMW.length; i++) {

                createOption(ddl2, BMW[i], BMW[i]);

                }

                break;

            case 'Ford':

                ddl2.options.length = 0;

                for (i = 0; i < Ford.length; i++) {

                    createOption(ddl2, Ford[i], Ford[i]);

                }

                break;

                default:

                    ddl2.options.length = 0;

                break;

        }



    }



    $('.dropdown2')function createOption(ddl, text, value) {

        var opt = document.createElement('option');

        opt.value = value;

        opt.text = text;

        ddl.options.add(opt);

    }

    <select class="dropdown" id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">

                                        <option value=""></option>

                                        <option value="Audi">Audi</option>

                                        <option value="BMW">BMW</option>

                                        <option value="Ford">Ford</option>

                                    </select>

                                    

                                    <select id="ddl2">

                                    </select>





 $('.dropdown')function configureDropDownLists(ddl1,ddl2) {

        var Audi = new Array('A1', 'S1', 'RS3');

        var BMW = new Array('3 series', '5 series', 'M5');

        var Ford = new Array('A Class', 'C Class', 'E class');

    

        switch (ddl1.value) {

            case 'Audi':

                ddl2.options.length = 0;

                for (i = 0; i < Audi.length; i++) {

                    createOption(ddl2, Audi[i], Audi[i]);

                }

                break;

            case 'BMW':

                ddl2.options.length = 0; 

            for (i = 0; i < BMW.length; i++) {

                createOption(ddl2, BMW[i], BMW[i]);

                }

                break;

            case 'Ford':

                ddl2.options.length = 0;

                for (i = 0; i < Ford.length; i++) {

                    createOption(ddl2, Ford[i], Ford[i]);

                }

                break;

                default:

                    ddl2.options.length = 0;

                break;

        }



    }



    $('.dropdown2')function createOption(ddl, text, value) {

        var opt = document.createElement('option');

        opt.value = value;

        opt.text = text;

        ddl.options.add(opt);

    }

    <select class="dropdown" id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">

                                        <option value=""></option>

                                        <option value="Audi">Audi</option>

                                        <option value="BMW">BMW</option>

                                        <option value="Ford">Ford</option>

                                    </select>

                                    

                                    <select id="ddl2">

                                    </select>





jquery html css




jquery html css






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 22 at 18:56









j08691

164k20189212




164k20189212










asked Nov 21 at 13:12









Haseeb Mohammed

61




61












  • what you are communicating about is not dropdown menu. it is more or less like a tree view. like in windows explorer. except that you are not asking for a trailing line from the root.
    – vssadineni
    Nov 21 at 13:37










  • And this is not the right place for ideating. Instead work on it and if you have some code and got stuck anyone from 'SO' can help you with it.
    – vssadineni
    Nov 21 at 13:44










  • @HaseebMohammed. Would a dropdown that opened another dropdown be useful, like this: w3schools.com/bootstrap/…
    – user2796515
    Nov 21 at 14:05




















  • what you are communicating about is not dropdown menu. it is more or less like a tree view. like in windows explorer. except that you are not asking for a trailing line from the root.
    – vssadineni
    Nov 21 at 13:37










  • And this is not the right place for ideating. Instead work on it and if you have some code and got stuck anyone from 'SO' can help you with it.
    – vssadineni
    Nov 21 at 13:44










  • @HaseebMohammed. Would a dropdown that opened another dropdown be useful, like this: w3schools.com/bootstrap/…
    – user2796515
    Nov 21 at 14:05


















what you are communicating about is not dropdown menu. it is more or less like a tree view. like in windows explorer. except that you are not asking for a trailing line from the root.
– vssadineni
Nov 21 at 13:37




what you are communicating about is not dropdown menu. it is more or less like a tree view. like in windows explorer. except that you are not asking for a trailing line from the root.
– vssadineni
Nov 21 at 13:37












And this is not the right place for ideating. Instead work on it and if you have some code and got stuck anyone from 'SO' can help you with it.
– vssadineni
Nov 21 at 13:44




And this is not the right place for ideating. Instead work on it and if you have some code and got stuck anyone from 'SO' can help you with it.
– vssadineni
Nov 21 at 13:44












@HaseebMohammed. Would a dropdown that opened another dropdown be useful, like this: w3schools.com/bootstrap/…
– user2796515
Nov 21 at 14:05






@HaseebMohammed. Would a dropdown that opened another dropdown be useful, like this: w3schools.com/bootstrap/…
– user2796515
Nov 21 at 14:05



















active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53412837%2fhow-to-create-a-drill-down-search-menu-on-a-website%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown






























active

oldest

votes













active

oldest

votes









active

oldest

votes






active

oldest

votes
















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53412837%2fhow-to-create-a-drill-down-search-menu-on-a-website%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-

Popular posts from this blog

Sphinx de Gizeh

Image
Pour les articles homonymes, voir Sphinx. Sphinx de Gizeh.mw-parser-output .entete.egypte-antique{background-image:url("//upload.wikimedia.org/wikipedia/commons/c/cc/Picto_infobox_ancient_Egypt.png")} Site d'Égypte antique Le visage du sphinx de Gizeh. Noms en arabe أبو الهول , Abou al-Hôl Localisation Région Basse-Égypte Coordonnées 29° 58′ 31″ nord, 31° 08′ 16″ est Géolocalisation sur la carte : Égypte Sphinx de Gizeh modifier   Le sphinx de Gizeh est la statue thérianthrope qui se dresse devant les grandes pyramides du plateau de Gizeh, en Basse-Égypte. Sculpture monumentale monolithique la plus grande du monde [ 1 ] avec 73,5 mètres de longueur, 14 mètres de largeur et 20,22 mètres de hauteur, elle représente un sphinx couchant. Réalisée vers -2500, elle serait attribuée à Djédefrê, l'un des pharaons de la IV e  dynastie, représentant son père le pharaon Khéops. Sommaire 1 Étymologie 2 Desc...
Read more

Dijon

Image
Dijon.mw-parser-output .entete.map{background-image:url("//upload.wikimedia.org/wikipedia/commons/7/7a/Picto_infobox_map.png")} De haut en bas, de gauche à droite : Panorama du centre historique vu depuis la Cathédrale Saint-Bénigne, le tramway passant sous l'Auditorium , la place François Rude, les Tuiles vernissées de l'Hôtel Aubriot, le centre commercial Toison d'or et le jardin Darcy. Blason Logo Administration Pays   France Région Bourgogne-Franche-Comté (préfecture) Département Côte-d'Or (préfecture) Arrondissement Dijon (chef-lieu) Canton bureau centralisateur de 6 cantons : Dijon-1, 2, 3, 4, 5, 6 Intercommunalité Dijon Métropole Maire Mandat François Rebsamen 2015-2020 Code postal 21000 (comportait aussi le code 21100 quand la ville possédait deux bureaux distributeurs) Code commune 21231 Démographie Gentilé ...
Read more

Guerrita

Image
Guerrita Présentation Nom de naissance Rafael Guerra Bejarano Apodo Guerrita Naissance 6 mars 1862 Cordoue Décès 21 février 1941 (à 78 ans) Nationalité Espagnol Carrière Alternative 29 septembre 1887 à Madrid Parrain, Lagartijo Fin de carrière 15 octobre 1899 Distinction Nommé « Deuxième Calife de la Tauromachie » modifier   Rafael Guerra Bejarano dit « Guerrita » , né à Cordoue (Espagne) le 6 mars 1862, mort à Cordoue le 21 février 1941, était un matador espagnol. Présentation | « Guerrita » fut sans doute l’un des plus grands matadors de son époque, peut-être même le plus grand : insurpassable avec les banderilles, d’une parfaite maîtrise avec la muleta , infaillible avec l’épée. Il se fait d'abord banderillero comme il est fréquent à l'époque et acquiert vite une réputation qui dépasse celle du maestro qu’il assiste, d’abord « Bocanegra », puis Fernando Gómez « El Gall...
Read more