Mam pustą listę rozwijaną zależną od wartości z innego menu rozwijanego. Chcę napisać go za pomocą waniliowego JS, a nie Jquery, który zapełni listę rozwijaną przykładowymi danymi, jak pokazano poniżej

Poniżej przykładowe dane:

[{"1":"ABA NORTH"},{"2":"ABA SOUTH"},{"3":"AROCHUKWU"},{"4":"BENDE"},{"5":"IKWUANO"},{"6":"ISIALA NGWA NORTH"},{"7":"ISIALA NGWA SOUTH"},{"8":"ISUIKWUATO"},{"9":"OBINGWA"},{"10":"OHAFIA"},{"11":"OSISIOMA"},{"12":"UGWUNAGBO"},{"13":"UKWA EAST"},{"14":"UKWA WEST"},{"15":"UMUAHIA NORTH"},{"16":"UMUAHIA SOUTH"},{"17":"UMU - NNEOCHI"}]

HTML:

<select name="states" id="profileapplicationform-lga_id">
<option value="">Select one</option>
</select>

JS

<script type="text/javascript">
    window.onload = function(e){
        var select = document.getElementById("profileapplicationform-state_origin_id");
        select.addEventListener('change', function(){
            $.ajax({
                type: 'GET',
                url: baseurl,
                data: {state_origin_id: this.value},
                success: function(data){
                    var list = document.getElementById("profileapplicationform-lga_id");
                    var html ='';
                    for (var i =1; i<data.length; i++){
                        html+= '<option value="' +data[i][0]+ '">' +data[i][1]+ '</option>';
                    }
                    list.append(html);;
                },              
            }); 
        });
    }
</script>

Za każdym razem, gdy wybieram główną wartość, rozwijane menu zależne zwraca puste miejsce na tagu wyboru, ale przykładowe dane powyżej są wyświetlane za każdym razem, gdy przeglądam odpowiedź na karcie sieci. Prosimy o pomoc tutaj.

0
Oyedele Femi 2 kwiecień 2020, 05:25

5 odpowiedzi

Najlepsza odpowiedź

Można to zrobić na wiele różnych sposobów, używając czystego javascript.

Gdy otrzymasz tablicę danych z żądania GET, możesz użyć pętli for, aby przejść przez data i utworzyć jeden duży ciąg HTML (htmlToInsert) każdego <option> z odpowiednimi dane wewnątrz.


Zwraca Object.entries () tablica, której elementami są tablice odpowiadające wyliczalnym parom właściwości [klucz, wartość] z kluczem łańcuchowym znajdującym się bezpośrednio na obiekcie.

Następnie możesz użyć przypisania zniszczenia tablicy, aby weź parę key i value.

Gdy to zrobisz, możesz po prostu wstawić go za pomocą Element.insertAdjacentHTML ()


Uwaga: ze względu na wydajność najlepiej jest grupować wszystkie zmiany DOM na raz, zamiast zmieniać DOM w pętli.

const data = [{"1":"ABA NORTH"},{"2":"ABA SOUTH"},{"3":"AROCHUKWU"},{"4":"BENDE"},{"5":"IKWUANO"},{"6":"ISIALA NGWA NORTH"},{"7":"ISIALA NGWA SOUTH"},{"8":"ISUIKWUATO"},{"9":"OBINGWA"},{"10":"OHAFIA"},{"11":"OSISIOMA"},{"12":"UGWUNAGBO"},{"13":"UKWA EAST"},{"14":"UKWA WEST"},{"15":"UMUAHIA NORTH"},{"16":"UMUAHIA SOUTH"},{"17":"UMU - NNEOCHI"}]


let htmlToInsert = ''

for (let i = 0; i < data.length; i++) {
  const [[key, val]] = Object.entries(data[i])
  htmlToInsert += `<option value="${key}">${val}</option>`
}


const select = document.querySelector('#profileapplicationform-lga_id')
select.insertAdjacentHTML('beforeend', htmlToInsert)
<select name="states" id="profileapplicationform-lga_id">
  <option value="">Select one</option>
</select>
1
ksav 2 kwiecień 2020, 03:20

Spójrz na tę linię:

html+= '<option value="' +data[i][0]+ '">' +data[i][1]+ '</option>';

Nie możesz pobrać elementów z obiektów według indeksu, ale możesz to zrobić

data[key] //returns value

Więc twój kod powinien wyglądać tak

html+= '<option value="' +Object.keys(data[i])[0]+ '">' +data[i][Object.keys(data[i])]+ '</option>';

Object.keys(data[i])[0] najpierw otrzymuje klucze danych [i]. Jest tylko jeden klucz, więc po prostu pobierz pierwszy element zwróconej tablicy. To jest twój klucz.

data[i][Object.keys(data[i])] otrzymuje element. Następnie wykorzystuje właściwość data[key], aby uzyskać wartość tego elementu.

Zamiast używać list.append(), możesz spróbować użyć list.innerHTML += html

0
Kino Bacaltos 2 kwiecień 2020, 02:41

Coś w tym stylu ? (czysty kod JS)

window.onload =()=>
  {
  const select     = document.getElementById("profileapplicationform-state_origin_id")
    ,   selectList = document.getElementById("profileapplicationform-lga_id")
    ;
  select.oninput =()=>
    {
    selectList.innerHTML = '<option value="">Select one</option>'
      ;
    fetch ( baseurl,  // ??
      {
      method: 'POST',
      headers: new Headers(),
      body:JSON.stringify({state_origin_id: select.value})
      })
    .then ( resp => resp.json())
    .then ( data =>
      {
      data.forEach(elm=>
        {
        let [key, val] = Object.entries(elm)[0]
        selectList.add(new Option(val,key))
        })
      })
    .catch ( err => console.log(err) )
    }
  }

JavaScript pobierz - & gt; https://developer.mozilla.org/en-US/ docs / Web / API / Fetch_API / Using_Fetch

Javascript nowa opcja - & gt; https://developer.mozilla.org/en-US/ docs / Web / API / HTMLOptionElement / Option

Więcej pytań)?

0
Mister Jojo 2 kwiecień 2020, 03:37

Zamiast jQuery można użyć Fetch API $.ajax() metoda.

FAZY

  1. POBIERZ swój kod JSON (prześlij dokładny kod JSON, o którym mowa, na działający serwer testowy)

  2. Wykonaj iterację przez JSON, aby uzyskać dostęp do każdego obiektu w tablicy

  3. W każdym obiekcie przekształć go w tablicę i zniszcz, aby uzyskać dostęp zarówno do klucza, jak i wartości

  4. Renderuj htmlString <option> dla każdej pary klucz / wartość do celu <select>


PRÓBNY

Uwaga: <form>, zdarzenie atrybutu onchange=... przypisane do <form> i <output> nie są wymagane. Są dodawane w celach demonstracyjnych.

const dataToSelect = async(endpoint, selector = "select") => {
  const select = document.querySelector(selector);
  const response = await fetch(endpoint);
  let data = await response.json();

  for (let object of data) {
    for (let [key, value] of Object.entries(object)) {
      let optionHTML = `<option value='${key}'>${value}</option>`;
      select.insertAdjacentHTML('beforeend', optionHTML);
    }
  }
  return data;
}

dataToSelect('https://api.myjson.com/bins/1h3cbk', '#pick');
:root,
body {
  font: 400 3vw/1.5 Verdana
}

select,
option,
output {
  font: inherit;
  display: inline-block;
  width: 20ch;
}
<form id='main' onchange='view.value = pick.value; return false'>
  <select id='pick' name='pick'>
    <option value='' default>PICK A LOCATION</option>
  </select>
  <label for='view'>VALUE: </label>
  <output id='view' for='pick'></output>
</form>
0
Community 20 czerwiec 2020, 09:12

Widzę lepiej Twoje przykładowe dane iw tym przypadku musisz użyć Object.entries w celu uzyskania klucza i wartości każdego obiektu:

const data = [{"1":"ABA NORTH"},{"2":"ABA SOUTH"},{"3":"AROCHUKWU"},{"4":"BENDE"},{"5":"IKWUANO"},{"6":"ISIALA NGWA NORTH"},{"7":"ISIALA NGWA SOUTH"},{"8":"ISUIKWUATO"},{"9":"OBINGWA"},{"10":"OHAFIA"},{"11":"OSISIOMA"},{"12":"UGWUNAGBO"},{"13":"UKWA EAST"},{"14":"UKWA WEST"},{"15":"UMUAHIA NORTH"},{"16":"UMUAHIA SOUTH"},{"17":"UMU - NNEOCHI"}]


data.forEach(item => {
  for (let [key, value] of Object.entries(item)) {
    html += `<option value="${key}">${value}</option>`;
  }
});
0
Oscar Velandia 2 kwiecień 2020, 02:45