Member Avatar for scottyg13

Hi I was wondering if someone could help me with a code for my website? Basically what I want to do is have a drop down list that is essentially a matrix in the sense that picking one option leads to another and eventually you can narrow down the results and find what you're looking for.

for example if i was searching for cars:

what type of car: honda, ford, etc
what colour: red, blue, green etc
what year: 1999,2000 etc
price: under 5000, etc

and eventually these choices would lead to different results based on what the users input was. If I am posting in the wrong section I am sorry as I am new here and this seemed a good fit...thanks I appreciate any help I can get as I am a novice who has a website!

  • 6 Contributors
  • 7 Replies
  • 120 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by kar123

Dani AI

Generated

A quick practical plan that follows the replies already here.

If each select is truly independent, static form selects are fine (as pointed out). For dependent choices (choose a make and the model list narrows), use a tiny JSON API plus client-side code to fetch and repopulate the next dropdown. was heading in this direction; Flash (suggested by ) is not a good option today.

Client-side pattern (vanilla JS, progressive enhancement):

const next = document.getElementById('model');
select.addEventListener('change', async () => {
  next.disabled = true;
  next.innerHTML = '<option>Loading...</option>';
  const res = await fetch('/api/options?type=model&parent=' + encodeURIComponent(select.value));
  const items = await res.json();
  next.innerHTML = items.map(i => `<option value="${i.id}">${i.label}</option>`).join('');
  next.disabled = false;
});

Server-side: return compact JSON and always validate inputs. Example approach (PHP + PDO, prepared statements) is safer than building SQL by hand; validate type against an allow-list and bind the parent value.

UX, performance and accessibility tips:

  • For very large option sets use autocomplete / typeahead instead of long selects.
  • Show a clear placeholder like "Select make..." and disable dependent controls until data arrives.
  • Provide a non-JS fallback (submit the form and render filtered results server-side).
  • Cache frequent responses server-side and client-side where appropriate to reduce DB hits.

Security and refs: always validate server-side and use parameterized queries (see OWASP SQL injection guidance). For the client fetch pattern see the MDN fetch docs for robust error handling.

Recommended Answers

All 7 Replies

Member Avatar for Member #334542

You have to use javascript, php, mysql and ajax. What level you having knowledge on those parts and try to show your code what you have tried?

Member Avatar for joao_pimentel

You also may use Flash which gives you a simple manner of doing it!
There's also many web sites which automatically create HTML menus for you. It's simple to find it, just google it.

Member Avatar for scottyg13

thank you both for replying, I was wondering if that is what it is called - HTML menu? Then I believe I can google search it and find a quick template to add onto my website.

Member Avatar for gunnarflax

If none of the following options are dependent of the choice of the former one then you don't need JavaScript, you can simply have several dropdownlists :)

<select name="make">
   <option value="ford">Ford</option>
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
</select>
<select name="colour">
   <option value="red">Red</option>
   <option value="green">Green</option>
   <option value="blue">Blue</option>
</select>
<select name="year">
   <option value="1990">1990</option>
   <option value="1989">1989</option>
   <option value="1988">1988</option>
</select>

//etc.

Check this site to learn more about the dropdownlist (html select-element):
http://www.w3schools.com/tags/tag_select.asp

Then you just use a simple php-script to get the values from these elements and load the content depending on the user's inputs.

$make = mysql_real_escape_string($_POST['make']);
$colour = mysql_real_escape_string($_POST['colour']);
$year = mysql_real_escape_string($_POST['year']);

$result = mysql_query("SELECT * FROM cars WHERE make='$make' AND colour='$colour' AND year='$year') or die(mysql_error());

I hope this was helpful!

Member Avatar for gunnarflax

If your problem has been solved, please also mark the thread as solved :)

Member Avatar for macgurl70

A good resource that will give you examples, tutorials and reference pages is www.w3schools.com.

You can get a much better idea of the different methods available.

Member Avatar for kar123

You also may use Flash which gives you a simple manner of doing it!
There's also many web sites which automatically create HTML menus for you. It's simple to find it, just google it.

Yes, you're right! Whatever he is asking for I think flash can solve this problem easily. But still if anyone is not so familiar with flash design, action scripts other HTML options are also there to solve it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.