Select List with content below

JavaScript
1

Hi all,

I have copied https://www.w3schools.com/howto/howto_custom_select.asp to https://codepen.io/Juc1/pen/LYpNddq

Can anyone please tell me how I can show corresponding content below the select list eg an image of the relevant car - using this or other Javascript but not jQuery ?

2

The normal way is by attaching a handler to the select change event.

With this stuff though - shudder. Sorry, but I avoid w3schools for good reason.

1 Like
3

The person who wrote that javascript code should be flogged 1000 times with a wet noodle.

                <form id="gameCat" action="game.php" method="post">
                    <select id="selectCat" class="select-css" name="category" tabindex="1">
                        <option value="photography">Photography</option>
                        <option value="movie">Movie</option>
                        <option value="space">Space</option>
                    </select>
                </form>

var startBtn = document.querySelector('#startBtn');

const startgame = (e) => {
  e.preventDefault();
  document.querySelector('.gameTitle').textContent = "Photography";
  startBtn.style.display = "none";
  document.querySelector('#triviaInfo').style.display = "none";
  document.querySelector('#quiz').style.display = 'block';
  selectCat('photography');
};

startBtn.addEventListener('click', startgame, false);

Is a something I wrote of a javascript quiz game that I wrote and that was do in vanilla javascript.

I know that isn’t exactly what your looking for, but you could accomplish my code by targeting the e (event) handler in the script e.target.value? An have less code than what ws3schools.com did.

4

I mean, this is why stuff like select2.js exists :stuck_out_tongue:

I disagree with Paul; w3schools is good for a beginner’s reference guide site. If your question goes any deeper than “Explain to me in non-programmer-speak what does X tag/method do”, you’re on the wrong site. Same way you don’t go to an elementary school to learn quantum physics, or get that screw out with a hammer - use the right tool for the right job.

As Paul said, bind a function to the change event of your select box, and have it in some way display the image desired - change the SRC on an image tag, or make things display or hidden… there are several ways to go about achieving the effect.

1 Like
5

It might be time to check out how they’re doing. According to w3fools.com they were terrible and have since improved. Let’s take a look.

They were criticized for passing a string to setTimeout. That bad behaviour is still being taought at https://web.archive.org/web/20110411071807/http://w3schools.com/js/js_timing.asp

What about browser detection? They still use terrible techniques there.

What about their JS summary page? They still recommend ASP. That was discontinued in the year 2000 for .NET and C#, but not a word is said about those there.

I was ready to back down on my opinion, but on reflection it still stands.

6

Well my problem with your links are they’re all Wayback links to 2011.

If you’re going to say ‘they still…’… use links to the CURRENT pages?

Even the site you’re citing, w3fools, says at the top of their page:

Which is basically exactly what i said.

7

Oh wow, I stand corrected! My fault indeed for not paying attention to the url. They have improved a bit, which is nice to see.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.