2017-01-23 1 views
1

Ich möchte ein Array erstellen, wie:erzeugen und eine 2d-Array mit Schlüssel-Wert-Paar Zugriff mit Hilfe von JavaScript nur

var fruits[ ]=[ [1] ["Grapes","mango","orange"] , [2] ["banana"], [A] ["Avocado","Apple"] , [P] ["Pear","Papaya","pomegranate","plum"] ]; 

Und dementsprechend ich die oben Array mit Schlüssel-Wert-Paarung oder etwas ähnliches zugreifen möchten .

Zum Beispiel, wenn ich ein Dropdown mit Werten haben:

<select> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="A">A</option> 
    <option value="P">P</option> 
</select> 

auf meiner Auswahl Je sollte es die jeweiligen Werte anzuzeigen einer for-Schleife wie wenn ich Option „A“ dann ist die Verwendung von for-Schleife es sollte die Werte anzeigen, die der Option A entsprechen, dh. Avocado Apfel.

Wie kann ich das erreichen?

+0

Scheint benötigen Sie einen switch..case statt einer for-Schleife ... überprüfen: http: //www.w3schools.com/js/js_switch.asp –

+0

Danke für Ihre Vorschläge..aber das Szenario ist, dass das Array aus der Datenbank kommt und es ist dynamisch..so kann es einen Wert haben..so kann nicht Schalter Fall .. –

+0

Wenn Sie Schlüssel verwenden, ist es besser, ein o zu verwenden bject mit Arrays, so dass Sie Zahlen und Buchstaben als Schlüssel mischen können: 'var fruits = {" 1 ": [" Trauben "," mango "," orange "]," 2 ": [" banana "]," A " : ["Avocado", "Apple"], "P": ["Birne", "Papaya", "Granatapfel", "Pflaume"]} Dann können Sie die Schlüssel durchlaufen und diese Taste verwenden, um das Array zu erhalten Optionen, die Sie verwenden möchten. – Shilly

Antwort

2

Sie können Objekt anstelle Array verwenden und change Ereignis auf select binden und dann for Schleife verwenden.

var fruits = { 
 
    1: ["Grapes", "mango", "orange"], 
 
    2: ["banana"], 
 
    A: ["Avocado", "Apple"], 
 
    P: ["Pear", "Papaya", "pomegranate", "plum"] 
 
} 
 

 
$('select').change(function() { 
 
    var val = $(this).val(); 
 
    if (fruits[val]) { 
 
    for (var i = 0; i < fruits[val].length; i++) { 
 
     console.log(fruits[val][i]) 
 
    } 
 
    } 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="A">A</option> 
 
    <option value="P">P</option> 
 
</select>

+0

können wir nur mit For-Schleife zugreifen, ohne für jede Schleife ... bcoz Ich möchte auch die Länge davon ... wie Anzahl der Werte .. –

+0

Um die Länge zu bekommen, können Sie einfach 'console.log (Früchte [val] .length)' –

+0

Dank ... aber je nach Anforderung brauche ich für die Schleife anstatt oder jeder ... bcoz ich arbeite an einem Teil des Codes, der dynamisch ist und wenige Änderungen zwischen ... –

0

Es scheint, als ob Sie dem Array von Elementen beliebige Indizes geben möchten. In diesem Fall können Ihre Früchte ein einfaches Objekt sein, anstatt ein Array zu sein.

var fruits = { 
    1: ["Grapes", "mango", "orange"], 
    2: ["banana"], 
    'A': ["avacado", "apple"], 
    'P': ["Pear", "Papaya"] 
} 

Sie können auf jede Kategorie wie folgt zugreifen;

fruit[1]; // ["Grapes", "mango", "orange"] 
fruit['A']; // ["avacado", "apple"] 
+0

so wie Um auf die Namen zuzugreifen und sie anzuzeigen, verwenden Sie die for-Schleife –

+0

@ Lalitkumar.annaldas Sie können die ganze System-Demo hier überprüfen: https://jsfiddle.net/8jq52em3/ – Dagohan

0

Wie ich es mit einem Gegenstand gelöst hätte:

<html> 
<head></head> 
<body> 
    <div id="wrapper-select"></div> 
<script> 
var select, 
    keyToUse = "A", 
    fruits = { 
     "1" : ["Grapes","mango","orange"], 
     "2" : ["banana"], 
     "A" : ["Avocado","Apple"], 
     "P" : ["Pear","Papaya","pomegranate","plum"] 
    }, 
    createOption = function createOption(text) { 
     var option = document.createElement('option'); 
     option.value = text; 
     option.textContent = text; 
     return option; 
    }; 
// Select the fruits array we want to use. 
// Then loop over it, appending a new option element to our select element. 
select = fruits[keyToUse].reduce(function(select, fruitName) { 
    select.appendChild(createOption(fruitName)); 
    return select; 
}, document.createElement('select')); 
// Append the newly created select. 
document.querySelector('#wrapper-select').appendChild(select); 
</script> 
</body> 
</html> 
+0

danke ..aber ich habe bereits die Auswahl Drop-Down-bereit. Es kommt aus dem Backend mit JSON ... so brauchen Sie sich keine Sorgen ... –

Verwandte Themen