select won't show itself and choosing an option won't work

Question

i got a html-dummy ( http://www.gisa.de/formular_test/anmeldeformular.html ) from another company and now i am trying to create a web-form ( http://www.gisa.de/2359.html ) based on that dummy. i am using the same scripts, the basic structure is the same as the dummy, i've compared the sh** out of the code and found nothing. I found one thing with firebug: the site with the non-working select-block won't call the function custom_select from the script.js file - but why???

i hope someone will find a solution, or something that i've just overlooked

i made 2 jsfiddle out of it:

http://fiddle.jshell.net/WbXsv/1/

http://fiddle.jshell.net/95Q8P/1/

Answer 1

The code is not the same. On your page, you're missing two spans in your div select . Your page:

<div class="select">
    <select name="anrede" id="anrede" required="" class="input" style=">
      <option value="0" selected="selected">bitte auswählen</option>
      <option value="Frau">Frau</option>
      <option value="Herr">Herr</option>
    </select>
</div>

Their page:

<div class="select">
    <select name="anrede" id="anrede" required="" class="input" style=">
      <option value="0" selected="selected">bitte auswählen</option>
      <option value="Frau">Frau</option>
      <option value="Herr">Herr</option>
    </select>
    <span class="select-icon"></span>
    <span class="select-box">bitte auswählen</span>
</div>

Adding those solved the issue.

Answer 2

You have:

.js select {
    opacity: 0;
}

in gisa.css and custom_select function is adding custom html in place of hidden select.