I am looking to add a dropdown search menu to my drupal theme that has the same functionality as the one located here:

http://shop.leapfrog.com/leapfrog/ (top left search, 'help me find a gift')

Basically, the user chooses an option from drop down box 1.

options in dropdown box 2 change based on what is selected in dropdown box 1.

user selects an open from dropdown box 2, and clicks 'go'. a url is opened.

Is there already a drupal module available that has this functionality?

Comments

roger.ajith’s picture

Views and taxonomy modules we can display like this search in block.

mndonx’s picture

This is really a module development question more than a theming question. You might check out the Faceted Search module and, in particular, this post on displaying a guided search as a series of dropdowns, to get you started.

nuthman’s picture

faceted search looks like it may be in the right direction. Thanks!

ssuryar’s picture

<html>
<head>
<script>

/* Multiple Drop Down Surya R Praveen */

function show(){

var ty= window.document.getElementById('type');

var ri= window.document.getElementById('risk');

var ho= window.document.getElementById('holding');

var ca= window.document.getElementById('capital');

var ag= window.document.getElementById('age');



var tysel= ty.options[ty.selectedIndex].value;

var risel= ri.options[ri.selectedIndex].value;

var hosel= ho.options[ho.selectedIndex].value;

var casel= ca.options[ca.selectedIndex].value;

var agsel= ag.options[ag.selectedIndex].value;



if(tysel=="Investor" && risel=="Low" && hosel=="G36" && casel=="B25"){

window.location = "http://suryarpraveen.wordpress.com/contact/";

}

else if(tysel=="Investor" && risel=="Low" && agsel=="2540" && casel=="B25"){

window.location = "http://suryarpraveen.wordpress.com/category/computing/";

}

else if(tysel=="Investor" && risel=="Medium" && agsel=="2540" && casel=="B25"){

window.location = "http://suryarpraveen.wordpress.com/category/electronics/";

}

else if(tysel=="Investor" && risel=="High" && agsel=="2540" && casel=="B25"){

window.location = "http://suryarpraveen.wordpress.com/category/gaming/";

}

else if(tysel=="Investor" && risel=="VHigh" && agsel=="2540" && casel=="B25"){

window.location = "http://suryarpraveen.wordpress.com/category/internet/";

}

else if(tysel=="Trader"){

window.location = "http://suryarpraveen.wordpress.com/category/mobile/";

}

}

</script>
</head>
<body>

<form id="form1" name="form1" method="post" action="">

  <label class="llabel">Type</label> : <select name="type" class="forms" id="type">

<option value="Investor">Investor</option>

<option value="Trader">Trader</option>

<option value="Both">Both</option>

<option value="None">None</option></select>

<br>

  <label class="llabel">Age</label> : <select name="age" class="forms" id="age">

<option value="25">Below 25 years</option>

<option value="2540">Between 25-40 Years</option>

<option value="4055">Between 40-55 Years</option>

<option value="55">Above 55 Years</option>

</select><br>

<label class="llabel">Profession</label> : <select name="prof" class="forms" id="prof">

<option value="Self">Self Employed</option>

<option value="Job">Job</option>

<option value="Business">Business</option>

<option value="Investorpro">Investor</option>

</select>

<br>

<label class="llabel">Risk Profile</label> : <select name="risk" class="forms" id="risk">

<option value="Low">Low</option>

<option value="Medium">Medium</option>

<option value="High">High</option>

<option value="VHigh">Very High</option>

</select>

<br>

<label class="llabel">Knowledge</label> : <select name="select" class="forms">

<option value="Novice">Novice</option>

<option value="Basic">Basic Understanding</option>

<option value="Good">Good Understanding</option>

<option value="Specialist">Specialist</option>

</select>

<br>

<label class="llabel">Risk Capital</label> : <select name="capital" class="forms" id="capital">

<option value="B2">Below 2 Lacs</option>

<option value="B25">Between 2-5 Lacs</option>

<option value="B510">Between 5-10 Lacs</option>

<option value="G10">Greater than 10 Lacs</option>

</select>

<br>

<label class="llabel">Holding Period</label> : <select name="holding" class="forms" id="holding">

<option value="B12">Between 1-2 months</option>

<option value="B612">Between 6-12 months</option>

<option value="B1236">Between 12-36 months</option>

<option value="G36">Greater than 36 months</option>

</select>

<br>

<label class="llabel">Expected Returns</label> : <select name="select" class="forms">

<option value="35">35% per year</option>

<option value="55">55% per year</option>

<option value="75">75% per year</option>

<option value="100">100% per year</option>

</select>

<br><br>

 <div align="center"> 

<input type="button" value="Submit" name="Submit" onclick="return show();">&nbsp;&nbsp;

    <input type="button" value="Reset" name="Reset">&nbsp;&nbsp;

	<input type="text" id="text" style="visibility:hidden">

</div>

</form>
</body>
</html>

Just copy & paste the code, If it satisfies then don't forget to visit my website