Variable Array - Werte mit Leerzeichen oder Sonderzeichen

[dhouzer]

Hallo liebes Forum.

Bin neu hier im Forum und was JS angeht ein absoluter Neewbie.

Auf einer Webseite existiert ein Dropdownmenü mit Ländern.
Wählt man ein Land aus wird eine Weltkarte mit dem jeweiligen eingefärbten Land angezeigt.
Funktioniert auch soweit, allerdings nur bei Ländern die kein Leerzeichen oder Sonderzeichen aufweisen.
Sprich "Deutschland", "Belgien" oder "Spanien" machen keine Probleme.
Allerdings klappt das bei Ländern wie "Bosnien & Herzegowina" oder "Hong Kong" nicht.

Der Code sieht folgendermaßen aus:

   $('.form-control-select-country').change(function (event) {
        var counts = 79;
        var target = $(this).val();
        // var target = $(this).attr('data-target');
        var contact = ["contact", "Albania", "Algeria", "Angola", "Argentina", "Australia", "Austria", "Bahrain", "Belgium", "Bosnia", "Brazil", "Bulgaria", "Chile", "China", "Croatia", "Cyprus", "Czech", "Denmark", "Egypt", "Equador", "Estonia", "Finland", "France", "Georgia", "Germany", "Ghana", "Great Britain", "Greece", "Hong Kong", "Hungary", "India", "Indonesia", "Iran", "Ireland", "Israel", "Italy", "Japan", "Kenya", "Korea", "Kosovo", "Kuwait", "Latvia", "Libya", "Lithuania", "Macedonia", "Malaysia", "Moldova", "Morocco", "Netherlands", "New Zealand", "Nigeria", "Northern Ireland", "Norway", "Oman", "Panama", "Peru", "Philippines", "Poland", "Qatar", "Romania", "Russia", "Saudi-Arabia", "Singapore", "Slovakia", "Slovenia", "South Africa", "Spain", "Sweden", "Switzerland", "Taiwan", "Tanzania", "Thailand", "Tunisia", "Turkey", "Ukraine", "United Arab Emirates", "Venezuela", "Vietnam"];
       
        for (var i = 0; i < counts; i++) {
          $('#' + contact[i]).hide();
          $('#' + contact[i] + '-image').hide();
        }
      
        $('#' + target).show(target);
        $('#' + target + '-image').show();
      
    });

Ist ein wenig wirr programmiert, da hier erst alles ausgeblendet wird und danach dann das neue Land angezeigt wird. Ansonsten hätte der halt im DIV die Länder immer noch zusätzlich angezeigt.

Vielleicht gibt es ja eine ganz einfach Lösung oder ich muss hier ganz anders vorgehen.
Bin über jeden Hinweis oder Link dazu dankbar.
Ansonsten wünsche ich Euch erstmal einen schönen Tag.

 

[mikdoe]

willkommen bei uns!

wie sieht denn der code aus der das select baut?
und ganz wichtig: in welchem charset ist das js gespeichert und der code der die länder-id's enthält?

 

[dhouzer]

charset="utf-8"

<div class="form-group ">
  <label for="country" class="col-sm-2 control-label">Country:</label>
  <div class="col-sm-6">
    <select id="country" class="form-control-select-country" name="form[country]">
      <option value="contact">Please select your country ...</option>
      <option value="contact" data-target="contact" >- My region is not listed -</option>
      <option value="Albania" data-target="Albania" >Albania</option>
      <option value="Bosnia" data-target="Bosnia" >Bosnia & Herzegovina</option>
      <option value="Brazil" data-target="Brazil" >Brazil</option>
      <option value="Bulgaria" data-target="Bulgaria" >Bulgaria</option>
      <option value="Great Britain" data-target="Great Britain" >Great Britain</option>
      <option value="Greece" data-target="Greece" >Greece</option>
      ...
      ...
    </select>
  </div>
</div>

Ich hoffe das sind die Infos die gemeint waren.

 

[kkapsner]

Eigentlich dürfen IDs keine Leerzeichen enthalten (auch wenn z.B. der FF das akzeptiert und man mit document.getElementById() auch darauf zugreifen kann - darauf verlassen würde ich mich nicht). Und in einem Selektor hat ein Leerzeichen natürlich eine besondere Funktion, die dir in deinem Fall das Problem macht.

Wenn du unbedingt das Leerzeichen im value und der ID brauchst, darfst du nicht mit jQuery arbeiten um die Node zu bekommen, sondern musst document.getElementById() verwenden. Aber ich würde empfehlen, dass du die Leerzeichen im value und der ID (nicht im angezeigten Text) durch etwas ersetzt (z.B. ein "-").