Nie wiem jak napisać to zadanie. Chciałbym tworzyć dynamicznie różne wejścia wyboru, które mają wspólną opcję.

Na przykład. Mój plik json to:

data.json

[{"name":"New York","value":"ny"},
{"name":"Los Angeles","value":"la"},
{"name":"Milan","value":"milan"},
{"name":"Rome","value":"rome"}]

Powszechna opcja to:

<option value="yes"> yes </option>
<option value="no> no</option>

Poprzez JS chciałbym stworzyć opcję wyboru dla Nowego Jorku, opcję wyboru dla Los Angeles itd... Jak mogę to zrobić? z góry dziękuję

0
Jean 3 listopad 2018, 13:19

1 odpowiedź

Najlepsza odpowiedź

Po prostu przejdź przez tablicę w pętli i użyj właściwości name i value każdego obiektu tablicy, aby skonstruować opcje dla listy wyboru. Następnie przekaż to do listy wyboru.

EDYCJA - jak wskazano w komentarzach - OP chce, aby różne elementy tablicy były pokazywane indywidualnie i miały wartości tak / nie. Odpowiedź zmieniona, aby to umożliwić.

var arr = [
  {"name":"New York","value":"ny"},
  {"name":"Los Angeles","value":"la"},
  {"name":"Milan","value":"milan"},
  {"name":"Rome","value":"rome"}
];

buildSelect();


function buildSelect() {
    arr.forEach(function(item){
        var label = document.createElement("label"); 
        label.innerText = item.name;
        
        var select = document.createElement("select"); 
        
        var optYes = document.createElement("option"); 
        optYes.textContent = 'Yes'; 
        
        var optNo = document.createElement("option"); 
        optNo.textContent = 'No'; 

        select.appendChild(optYes);
        select.appendChild(optNo)
          
        document.querySelector('body') 
          .appendChild(label)
          .appendChild(select);
    })
}
label {
  display: block
}


select {
  display: block;
  margin-bottom: 15px;
}
1
gavgrif 3 listopad 2018, 13:52