Html выберите раскрывающийся список, как отображать имя и идентификатор одновременно - PullRequest
Новая
       5

Html выберите раскрывающийся список, как отображать имя и идентификатор одновременно

1 голос
/ 05 апреля 2020

Я искал такой же вопрос, но не нашел, чего я хочу добиться, я хочу одновременно отображать 'nama' и 'id' в опции, поэтому при раскрытии списка одним щелчком должен отображаться 'wick dhdfyj97' и 'abraham 15hndfj', возможно ли это (в javascript)? на данный момент мне удалось отобразить только «нама». Вот как выглядит мой json: 

[{"nama ": "wick","id": "dhdfyj97",},{"nama ": "abraham","id": "15hndfj",}]

Вот код: 

 .then(res =>{ 
    res.json().then(num => {
	
for (var o = 0; o < num.length; o++) {
    var i = document.getElementById("Select");
    var d = document.createElement("option");
    d.text = num[o].nama;
	
    i.add(d);
}
    }
  )
   })

Ответы [ 3 ]

1 голос
/ 05 апреля 2020

Создайте тег Option и назначьте его textContent для конкатенации item.nama и item.id и добавьте его к тегу Select, также вы видите пробел в "nama ", удаляющий его, поэтому он должен быть "nama" вместо этого в теге option

будет отображаться неопределенное 

let Array = [
    { "nama": "wick", id: "dhdfyj97" },
    { "nama": "abraham", id: "15hndfj" },
  ];
  let Select = document.getElementById("Select");
  Array.map((item) => {
    var d = document.createElement("option");
    d.textContent = item.nama + " " + item.id;
    Select.appendChild(d);
  });
<select id="Select"> </select>
0 голосов
/ 05 апреля 2020

Мы можем добавить оба, используя строковые литералы. 

 .then(res =>{ 
    res.json().then(num => {
       for (var o = 0; o < num.length; o++) {
            var i = document.getElementById("Select");
            var d = document.createElement("option");
            d.text = `${num[o].nama} ${num[o].id}`;

           i.add(d);
       }
    }
   )
 })

Я бы также предложил запросить тег html только один раз и повторно использовать его, а также выполнить итерацию по ответу, непосредственно используя для l oop: 

const i = document.getElementById("Select");
for (const item of num) {        
    const d = document.createElement("option");
    d.text = `${item.nama} ${item.id}`;
    i.add(d);
}

вы можете узнать больше о литералах шаблона здесь: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals вы можете ссылаться на MDN для гораздо большего.

0 голосов
/ 05 апреля 2020

Объедините nama и id вместе: 

 .then(res =>{ 
    res.json().then(num => {
	
for (var o = 0; o < num.length; o++) {
    var i = document.getElementById("Select");
    var d = document.createElement("option");
    d.text = num[o].nama + ' ' + num[o].id;
	
    i.add(d);
}
    }
  )
   })
...