Fügen Sie neue Optionen in der Dropdown-Liste in Abhängigkeit von anderen Dropdown-Liste

Question

Ich habe zwei Dropdown-Listen: die erste enthält Flaggen der Länder und die zweite enthält Sprachen .. Ich habe jQuery + CSS + HTML5, um diese 2 Listen zu erstellen.

Jetzt versuche ich, das zu tun: Ich Optionen der zweiten Liste ändern möchte (Sprachen), je nach dem Land, das ich ausgewählt ..

Zum Beispiel, wenn ich Spanien: Englisch Flagge und die spanische Flagge in denen erscheinen Liste der Sprachen

ich habe versucht, dass mit javascript:

<script language="javascript" type="text/javascript"> 
    function checkValidOption() { 
     var field = document.getElementById('countries'); 
     var operator = document.getElementById('operator'); 

     field.onchange = function() { 
      fieldcheck(); 
     } 

     fieldcheck(); 

     function fieldcheck() { 
      if (field.value == 'br') { 
       var opt = document.createElement('option'); 
       opt.value = 'ad'; 
       opt.setAttribute('data-image', '{{ asset(' 
        bundles/stageadmin/img/blank.gif ') }}'); 
       opt.setAttribute('data-imagecss', 'flag ad'); 
       opt.setAttribute('data-title', 'Andorra'); 
       operator.options.add(opt); 

      } else if (field.value == 'au') { 
       .. 
       .. 
      } 
     } 
     .. 
     .. 
    } 
</script> 

Die Länderliste:

<select name="countries" id="countries" style="width:300px;" onchange="checkValidOption();"> 
     <option value='br' data-image="{{ asset('bundles/stageadmin/img/blank.gif') }}" data-imagecss="flag br" data-title="Brazil"></option> 
     <option value='au' data-image="{{ asset('bundles/stageadmin/img/blank.gif') }}" data-imagecss="flag au" data-title="Australia"></option> 
    .. 
    .. 
    .. 
</select > 

dies ist die Sprache Liste: es enthält nur englische Sprache in der ersten (Flagge von US erscheinen)

<select id="operator" name="operator" style="width:300px;"> 
    <option value='us' data-image="{{ asset('bundles/stageadmin/img/blank.gif') }}" data-imagecss="flag us" data-title="United States"></option>  
</select> 

(nie ist es nur mit dem ‚Assets‘ dagegen, weil ich den Rahmen symfony bin mit).

Wenn ich das tat, indem ich ein Land änderte, ändere nichts in der Sprachenliste ... Ich weiß nicht, was das Problem ist .. aber wenn ich versuche, einfach einfache Optionen hinzuzufügen: Ich meine, ohne Flag-Sprachen. .. es funktioniert .. aber ich möchte es mit Flaggen erscheinen.

Bitte helfen Sie mir :)

Dank

Answer 1

Sie haben Fehler in Ihrem Code. in dieser Zeile

opt.setAttribute('data-image', '{{ asset('bundles/stageadmin/img/blank.gif ') }}'); 

Sie müssen einfache Anführungszeichen oder doppelte Anführungszeichen vermeiden.

opt.setAttribute('data-image', "{{ asset('bundles/stageadmin/img/blank.gif ') }}") 

auch verwenden operator.appendChild(opt) statt operator.options.add(opt)