Wie die HTML-Optionen auswählen aus einem json

Question

ich eine externen .json Datei bekam setzen, in dem ein arry ist definiert als:

var words = [ 
    "a", 
    "able", 
    "about", 
    "account", 
    "acid", 
    "across", 
    "act", 
    "addition"] 

Mein Plan in der .json Datei über jquery zu importieren ist, und Verwenden Sie dann die Werte im Array word als option in einem select Objekt. Mein Verständnis ist:

<div> 
    <select size="7" class="selection"></select> 
</div> 

<script> 
    $(document).ready(function() { 
     $.getJSON("words-small.json", function (result) { 
      $.each(result, function (i, word) { 
       $(".selection").html("<option>word</option>"); 
      }); 
     }); 
    }); 
</script> 

oder:

<script> 
    $(document).ready(function() { 
     $.getJSON("words-small.json", function (result) { 
      html = '' 
      for (i = 0; i < results.length; i++) { 
       html += "<option value=" + result[i] + ">" + result[i] + "</option>"; 
      }; 
      document.getElementById("myselect").innerHTML = html; 
     }); 
    }); 
</script> 

Aber weder Werke hier. Bitte sag mir, wie ich das beheben kann.

Answer 1

Ihre .json -Dateien muss so sein:

[ 
    "a", 
    "able", 
    "about", 
    "account", 
    "acid", 
    "across", 
    "act", 
    "addition" 
] 

dann entweder der Skripte funktionieren sollte. (Erste mit einer kleinen Anpassung)

<div> 
    <select size="7" class="selection"></select> 
</div> 

<script> 
    $(document).ready(function() { 
     $.getJSON("words-small.json", function (result) { 
      $.each(result, function (i, word) { 
       $(".selection").append("<option>"+word+"</option>"); 
      }); 
     }); 
    }); 
</script> 

Denken Sie daran, dass eine .json-Datei nur JSON enthalten sollte. Nicht Javascript, was Sie hatten.

Answer 2

Für Ihren ersten Versuch, Sie tun:

$(".selection").html("<option>word</option>"); 

Sie so etwas wie append werden soll verwenden, und auch sicherstellen, dass Sie nehmen „Wort“ aus der Zitate:

$(".selection").append("<option>" + word + "</option">); 

.html() ersetzt nur die Daten, die im HTML-Element enthalten sind, während .append() sie zum Ende hinzufügt.

Dies ist das Problem, wenn Sie nur einen Rückgabewert erhalten.

Es ist wie in Ihrem JSON-Objekt sieht man die Daten in einer Variablen definiert haben, stattdessen sollte es einfach sein:

[ 
    "a", 
    "able", 
    "about", 
    "account", 
    "acid", 
    "across", 
    "act", 
    "addition" 
] 

Answer 3

diese Arbeit für mich:

$.each(words, function (i, word) { 
    items+="<option>"+word+"</option>"; 
}); 
$(".selection").html(items); 

Answer 4

Sie haben einige Fehler in dein Code.

Unter der Annahme, dass Sie gültige Json haben und analysiert words Array

var words = [ 
 
    "a", 
 
    "able", 
 
    "about", 
 
    "account", 
 
    "acid", 
 
    "across", 
 
    "act", 
 
    "addition"]; 
 

 
$.each(words, function (i, word) { 
 
    $(".selection").append("<option value='"+word+"'>" + word + "</option>"); 
 
}); 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <select size="7" class="selection"></select> 
 
</div>

Answer 5

Sie mehrere Dinge, die behoben werden müssen. Einer, ist das .html() ersetzt die innereHTML, fügt sie nicht hinzu. Also müssen Sie alle Optionen erstellen und sie dann festlegen. Ich habe auch, wie im zweiten Skript, den Wert des Wortes als Optionswert angegeben. Beachten Sie, dass die inneren Anführungszeichen ebenfalls benötigt werden. Darüber hinaus wird Ihre jQuery von ".selection" dies auf alle Objekte tun, die mit der Klasse "selection" gekennzeichnet sind, während Sie in Ihrem zweiten Skript nur ein Element mit einer ID von "myselect" zuweisen wollten .

<div> 
    <select size="7" class="selection"></select> 
</div> 

<script> 
    $(document).ready(function() { 
     $.getJSON("words-small.json", function (result) { 
      var html = ""; 
      $.each(result, function (i, word) { 
       html += "<option value='"+word+"'>"+word+"</option"); 
      }); 
      $(".selection").html(html); 
     }); 
    }); 
</script> 

Answer 6

Sie können jQuery erweitern. Das Beste an diesem Ansatz ist, dass Sie diese Erweiterungen wiederverwenden können, wenn Sie eine Auswahl löschen oder ausfüllen müssen. Übergeben Sie einfach ein Array.

$.fn.clearSelect = function() { 
    return this.each(function() { 
     if (this.tagName == 'SELECT') 
      this.options.length = 0; 
    }); 
} 

$.fn.fillSelect = function(data) { 
    return this.clearSelect().each(function() { 
     if (this.tagName == 'SELECT') { 
      var dropdownList = this; 
      if (data.length > 0) { 
       this.disabled = false; 
      } 

      $.each(data, function(index, optionData) { 
       var option = new Option(optionData, optionData); 

       dropdownList.add(option, null); 
      }); 
     } 
    }); 
} 

wird diese Erweiterung ermöglicht es Ihnen, Ihre Daten direkt wie dieses Ich habe nicht getestet

$("#myselectid").fillselect(["a","able","about","account","acid","across","act"]); 

an die Auswahl passieren, aber die Snip-es sollte Ihnen die allgemeine Idee geben.

Aber in Ihrem Beispiel Sie die Erweiterungen auf diese Weise nennen könnte:

$(document).ready(function() { 
     $.getJSON("words-small.json", function (result) { 
      $(".selection").fillSelect(result); 
     } 
}); 

gerade getestet und bearbeitet die snipet. Der Test befindet sich hier https://jsfiddle.net/4wmj8pkk/