Language Dropdown

Hi I have a language dropdown but I am getting a repeated empty box under not sure why… LINK: Codepen

Not what I’m seeing (after clicking on the dt)

but before not after.

You have two anchors there in DTs. dt class=“us” and dt class=“undefined”. Two anchors = two boxes.

I see the dt class="us" in my code but the dt class="undefined" I only see that in the view page source not my code… :confused:

It is due to the Javascript. This line.

		$("#target").append('<dt class="' + selected.val() + '"><a href="#"><span class="flag"></span><em>' + selected.text() + '</em></a></dt>')

This also makes sense why it is class=“undefined”. Javascript adds that undefined since it can’t get a proper value.

1 Like

This is now a Javascript issue. You have Javascript you need to sort out. They can help you. Good luck. I’m moving the thread.

well thanks I had a feeling it was a js issue. But I decided to code this differently but thanks anyway.

Does that mean that you no longer need a solution to the problem? If so, it would help others if you shared what you ended up doing.

Naw I dont, I just ended up using different code…

Ahh good one - what did you end up using instead?

well since I am a beginner I the previous method involved using CSS Sprites which is probably
the way to go but I want to keep it simple right now and decided to just use the flag images one by
one instead.

 <div id="language_selector">
                           <dl id="Language" class="dropdown">
                                <dt><a href="#"><span><img class="flag" src="images/us.png" alt="" > &nbsp;Select Language</span></a></dt>
                                    <dd>
                                        <ul>
                                            <li><a href="#">Brazil<img class="flag" src="images/br.png" alt="" /><span class="value">BR</span></a></li>
                                            <li><a href="#">France<img class="flag" src="images/fr.png" alt="" /><span class="value">FR</span></a></li>
                                            <li><a href="#">Germany<img class="flag" src="images/de.png" alt="" /><span class="value">DE</span></a></li>
                                            <li><a href="#">India<img class="flag" src="images/in.png" alt="" /><span class="value">IN</span></a></li>
                                            <li><a href="#">Japan<img class="flag" src="images/jp.png" alt="" /><span class="value">JP</span></a></li>
                                            <li><a href="#">Serbia<img class="flag" src="images/cs.png" alt="" /><span class="value">CS</span></a></li>
                                            <li><a href="#">United Kingdom<img class="flag" src="images/gb.png" alt="" /><span class="value">UK</span></a></li>
                                            <li><a href="#">United States<img class="flag" src="images/us.png" alt="" ><span class="value">US</span></a></li>
                                        </ul>
                                    </dd>
                            </dl>
                                <span id="result"></span>
                            </div>

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