✔ Zwei demensionles Array in Verbindung Selectbox erstellen

[messmar]

Hallo zusammen,

ich habe folgendes Problem und es fällt mir auf die Schnelle keine Lösung ein:

Ich habe ein Selectbox (Dropdown), der so aussieht:

<select name="xxx" class="DropDown">
        <option value="Cuenca">Cuenca</option>
        <option value="Gipuzkoa">Gipuzkoa</option>
        <option value="Girona">Girona</option>
        <option value="Granada">Granada</option>
        <option value="Granada">Guadalajara</option>
        <option value="Huelva">Huelva</option>
        <option value="Huesca">Huesca</option>
        ....
</select>

Für jede dieser Provinzen, gibts einen bestimmten Code... z.B. für Ceuna gibt's: 13, für Gipuzkoa gibt's 52 und für Huesca gibt's 40. Diese Zhalen müssen dann automatisch in einem hidden Feld eingetragen bzw. geschriben werden, jenachdem was der User im Dropdown ausgewählt hat.

Wichtig: die Provinzen-Namen als Werte in den einzelnen Values für jede option, brauche ich statt die Zahlen, da ich sie dann für einen zweiten SelectboxBox verwende um dessen Inhalt dynamisch zu verändern.

Ich kann dann die Zahlen in den Values anstelle der Provinzen-Namen deswegen nicht verwenden.

Mit SelctedIndex wäre es mir lieber, aber das wird natürlich nicht gehen, da die Zahlen in dem Fall von 1 bis X aufsteigend gehen... Ich habe es zwar so quick & drity gelöst, aber das ist total nicht elegant und es hat viel zu viel, den man mit ein Paar Zeilen umgehen kann.

Ich habe folgendermassen gelöst:

   $('.DropDown').change(function(){
        $('.DropDown  > option:selected').each(function() {
            ....
            if($(this).val() == 'Cuenca'){$('.input_codePosEcm').val('13');}
            if($(this).val() == 'Gipuzkoa'){$('.input_codePosEcm').val('52');}
            if($(this).val() == 'Girona'){$('.input_codePosEcm').val('08');}
            if($(this).val() == 'Granada'){$('.input_codePosEcm').val('12');}
            if($(this).val() == 'Granada'){$('.input_codePosEcm').val('10');}
            if($(this).val() == 'Huelva'){$('.input_codePosEcm').val('09');}
            if($(this).val() == 'Huesca'){$('.input_codePosEcm').val('40');}
            ....
        });
    });

input_codePosEcm ist der hidden Feld.

Hat Jemand bitte ne Idee, wie sowas eleganter/anders zu lösen ist? Ich habe mir überlegt evtl. mit nem zwei Dimesionales Array zu berwekstelligen, aber es felht mit den Ansatzpunkt.

Vielen Dank und Gruß
Messmar

 

[messmar]

Hi,

gelöst und auch sehr sehr viel Code dabie gespart....

Folgendes:

<select name="xxx" class="DropDown">
        <option value="01Cuenca">Cuenca</option>
        <option value="34Gipuzkoa">Gipuzkoa</option>
        <option value="06Girona">Girona</option>
        <option value="19Granada">Granada</option>
        ....
</select>

und anhand von jQeury/Javascript den Value jeder Option mit subsctring geteilt und den ersten Teil (01) für das hiddenFeld und den zweiten (Cuenca) Teil für den anderen zweck verwendet.

     substring(0,2);
     substring(2, $(this).val().length)

Ganz easy... ;-)

Danke!
Messmar

 

[Parantatatam]

Brauchst du den Zahlenwert nur clientseitig, also so, dass du ihn nur mit JavaScript auslesen musst, oder muss dieser auch an den Server übertragen werden, wenn man das Formular abschickt? Wenn es ersteres wäre, gäbe es nämlich noch eine wesentlich elegantere Lösung:

<select name="xxx" class="DropDown">
  <option value="Cuenca" data-number="01">Cuenca</option>
  <option value="Gipuzkoa" data-number="34">Gipuzkoa</option>
  <option value="Girona" data-number="06">Girona</option>
  <option value="Granada" data-number="19">Granada</option>
  <!-- ... -->
</select>

var number = $(this).data('number');

 

[messmar]

Cool, wusste ich nicht. Danke!

Aber ist diese Lösung mit dem Attribute: data-number Crossbrowser? kann man sie einwandfrei verwenden?

Und ja, die Zhalenwerte werden nur Cleintseitig gebraucht aber der Text z.B. 'Gipuzkoa' wird an server geschickt.

Messmar

 

[Parantatatam]

Also die Attribute, die mit data-* anfangen, müssen seit HTML5 in jedem Browser implementiert sein. Da du aber darauf auch wie auf normale Attribute zugreifen kannst und jQuery das ausnutzt, sollte es da keine Probleme geben.

 

[messmar]

Ok, in diesem Fall wäre es beim fireFox und IE 9 kein Problem, aber IE8 und 7 muss ich evtl. noch checken.

 

[CreativPur]

Hi,

gelöst und auch sehr sehr viel Code dabie gespart....

Folgendes:

<select name="xxx" class="DropDown">
        <option value="01Cuenca">Cuenca</option>
        <option value="34Gipuzkoa">Gipuzkoa</option>
        <option value="06Girona">Girona</option>
        <option value="19Granada">Granada</option>
        ....
</select>

und anhand von jQeury/Javascript den Value jeder Option mit subsctring geteilt und den ersten Teil (01) für das hiddenFeld und den zweiten (Cuenca) Teil für den anderen zweck verwendet.

     substring(0,2);
     substring(2, $(this).val().length)

Ganz easy...

Danke!
Messmar

 

[CreativPur]

Hi messbar,

und wie sieht in deinem Script das Hiddenfeld aus ?
<input type="text" class="form-control" id="land_code" name="land_code" value="???????">

 

[messmar]

Hi CreativPur,

vielen Dank für das Feedback!
Das Issue ist längst geschlossen und auch Dank der Kompetenten Tutorialer Hilfe/Tipps gelöst.

Grüße