第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

如何根據(jù)所選值從 JSON 數(shù)組構(gòu)建列表?

如何根據(jù)所選值從 JSON 數(shù)組構(gòu)建列表?

藍(lán)山帝景 2022-10-13 19:31:36
我正在嘗試根據(jù)所選媒體創(chuàng)建經(jīng)過(guò)篩選的來(lái)源選擇列表。我知道我在過(guò)濾器下面使用的方法,但沒(méi)有正確顯示列表。我半睡半醒,試圖糾正這個(gè)問(wèn)題,需要有人提供一些意見(jiàn)。:-) 干杯!let types = [  {    "id": 1,    "media": "TV",    "source": "wkbw"  },  {    "id": 2,    "media": "TV",    "source": "wffo"  },  {    "id": 3,    "media": "TV",    "source": "wtrw"  },  {    "id": 8,    "media": "Radio",    "source": "wrqa"  },  {    "id": 9,    "media": "Radio",    "source": "wuqa"  },  {    "id": 10,    "media": "Radio",    "source": "wzzt"  }]$("#type").change(function() {    $("#results").empty();    selected = $("#type").val();    for (var i = 0; i < types.length; i++) {    // some kind of filter source by selected the one below isn't quite right    // $("#results").append("<option value='" + types[i].source + "'>" + types[i].source + "</option>");    source = types.filter(types => types.media === selected).map(d => d.source).join('');    $("#results").append("<option value='" + source + "'>" + source + "</option>");  }});這是我的小提琴:https ://jsfiddle.net/simplymarkb/sk0rdf2j/31/
查看完整描述

3 回答

?
富國(guó)滬深

TA貢獻(xiàn)1790條經(jīng)驗(yàn) 獲得超9個(gè)贊

您必須filter在循環(huán)外使用并獲取source[i]選項(xiàng)中的值。

也只是.html()用來(lái)清空。selectonchange

給你 => 工作演示:https ://jsfiddle.net/usmanmunir/u38hrox1/11/

只需運(yùn)行代碼片段即可查看它的作用。

let types = [

  {

"id": 1,

"media": "TV",

"source": "wkbw"

  },

  {

"id": 2,

"media": "TV",

"source": "wffo"

  },

  {

"id": 3,

"media": "TV",

"source": "wtrw"

  },

  {

"id": 8,

"media": "Radio",

"source": "wrqa"

  },

  {

"id": 9,

"media": "Radio",

"source": "wuqa"

  },

  {

"id": 10,

"media": "Radio",

"source": "wzzt"

  }

]


$("#type").change(function() {

  $("#results").html('')

  var selected = $("#type").val();

  var source = types.filter(types => types.media === selected).map(d => d.source);

  for (var i = 0; i < source.length; i++) {

    $("#results").append("<option value='" + source[i] + "'>" + source[i] + "</option>");

  }


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="type">

  <option value="TV">TV</option>

  <option value="Radio">Radio</option>

</select>

<hr>

<select id="results">..results</select>


查看完整回答
反對(duì) 回復(fù) 2022-10-13
?
ibeautiful

TA貢獻(xiàn)1993條經(jīng)驗(yàn) 獲得超6個(gè)贊

只需使用這樣的簡(jiǎn)單 if 語(yǔ)句重寫(xiě)您的代碼:


   let types = [

  {

    "id": 1,

    "media": "TV",

    "source": "wkbw"

  },

  {

    "id": 2,

    "media": "TV",

    "source": "wffo"

  },

  {

    "id": 3,

    "media": "TV",

    "source": "wtrw"

  },

  {

    "id": 8,

    "media": "Radio",

    "source": "wrqa"

  },

  {

    "id": 9,

    "media": "Radio",

    "source": "wuqa"

  },

  {

    "id": 10,

    "media": "Radio",

    "source": "wzzt"

  }

]


$("#type").change(function() {

    $("#results").empty();

    selected = $("#type").val();

  

  for (var i = 0; i < types.length; i++) {

    if(types[i].media === selected){

      $("#results").append("<option value='" + types[i].source + 

          "'>" + types[i].source + "</option>");

    }

  }

});



查看完整回答
反對(duì) 回復(fù) 2022-10-13
?
炎炎設(shè)計(jì)

TA貢獻(xiàn)1808條經(jīng)驗(yàn) 獲得超4個(gè)贊

請(qǐng)看下面的解決方案


let types = [

  {

    id: 1,

    media: "TV",

    source: "wkbw",

  },

  {

    id: 2,

    media: "TV",

    source: "wffo",

  },

  {

    id: 3,

    media: "TV",

    source: "wtrw",

  },

  {

    id: 8,

    media: "Radio",

    source: "wrqa",

  },

  {

    id: 9,

    media: "Radio",

    source: "wuqa",

  },

  {

    id: 10,

    media: "Radio",

    source: "wzzt",

  },

];


const type = document.querySelector("#type");

const result = document.querySelector("#result");


type.addEventListener("change", changeHandler);


function changeHandler(event) {

  const output = types

    .filter((type) => type.media === event.target.value)

    .map((type) => `<option value="${type.source}">${type.source}</option>`)

    .join("");


  result.innerHTML = output;

}

  

<select name="type" id="type">

  <option value="" disabled selected>Select value</option>

  <option value="TV">TV</option>

  <option value="Radio">Radio</option>

</select>


<select name="result" id="result"></select>


<script src="app.js"></script>


查看完整回答
反對(duì) 回復(fù) 2022-10-13
  • 3 回答
  • 0 關(guān)注
  • 108 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)