使用select元素篩選多個json文件

Question

只要只有一個選擇項，下面的代碼（在交互式代碼片段中）就能很好地工作，它讓我從json文件中選擇章節並在下面打印它們。

我怎樣纔能有幾個來自兩個不同數組的元素？ 當然，我必須將arr更改爲另一個變量名稱。 但是，如何指定我想要提供的選擇元素？

免責聲明：我得到了code from here和不完全理解它是如何工作

JavaScript和HTML

var arr = [{ 
 
    "Content": ["<h2>Heading of Paragraph1</h2><p>the actual pargraph1</p>"], 
 
    "Titel": ["Heading of Paragraph1"] 
 
    }, 
 
    { 
 
    "Content": ["<h2>Heading of Paragraph2</h2><p>the actual pargraph2</p>"], 
 
    "Titel": ["Heading of Paragraph2"] 
 
    }, { 
 
    "Content": ["<h2>Heading of Paragraph3</h2><p>the actual pargraph3</p>"], 
 
    "Titel": ["Heading of Paragraph3"] 
 
    } 
 
]; 
 

 
//prepare the options first 
 
var options = arr.map(function(item){ 
 
    return "<option value='" + item.Titel[0] + "'>"+ item.Titel[0] + "</option>" 
 
}).join(""); 
 

 
//set all the options to select and then bind change event 
 
$("select").html(options).change(function(){ 
 
    $("#paraContent").html(""); 
 
    var val = $(this).val(); 
 
    $("#paraContent").html(val.map(function(title){ 
 
     return arr.find((s) => s.Titel[0] == title).Content[0]; 
 
    }).join("</br>")) 
 
    //console.log(val); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="/returnselected_paragraphs.js"> 
 
    <select name="pargraphs" multiple> 
 
    </select> 
 
    <p id="paraContent"> 
 
     
 
    </p> 
 
    <input type="submit"> 
 
    </form>

這就是我試圖

https://jsfiddle.net/rba1amo7/

正如你所看到的，它加載第二個數據集到這兩個元素

Answer 1

來自@coderbyheart的代碼覆蓋了段落的內容，所以我將它作爲一個額外的參數。這個做什麼，我想

var arr = [{ 
 
     "Content": ["<h2>Heading of Paragraph1</h2><p>the actual pargraph1</p>"], 
 
     "Titel": ["Heading of Paragraph1"] 
 
     }, 
 
     { 
 
     "Content": ["<h2>Heading of Paragraph2</h2><p>the actual pargraph2</p>"], 
 
     "Titel": ["Heading of Paragraph2"] 
 
     }, { 
 
     "Content": ["<h2>Heading of Paragraph3</h2><p>the actual pargraph3</p>"], 
 
     "Titel": ["Heading of Paragraph3"] 
 
     } 
 
    ]; 
 

 
var arr2 = [ 
 
    { 
 
     "Content": ["<h2>Heading of Paragraph4</h2><p>the actual pargraph4</p>"], 
 
     "Titel": ["Heading of Paragraph4"] 
 
     } 
 
];  
 

 
const fillSelect = (data, select,para) => { 
 
    // prepare the options first 
 
    var options = data.map(item => "<option value='" + item.Titel[0] + "'>"+ item.Titel[0] + "</option>").join(""); 
 

 
    //set all the options to select and then bind change event 
 
    select 
 
     .html(options) 
 
     .change(function() { 
 
      para.html(""); 
 
      var val = $(this).val(); 
 
      para.html(val.map(title => data.find(s => s.Titel[0] == title).Content[0]).join("</br>")) 
 
    }); 
 
} 
 

 
// Now you can reuse the code: 
 

 
fillSelect(arr, $('select[name=pargraphs]'),$("#paraContent")); 
 
fillSelect(arr2, $('select[name=pargraphs2]'),$("#paraContent2")); 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <form action="/returnselected_paragraphs.js"> 
 
     <select name="pargraphs" multiple> 
 
     </select> 
 
     <select name="pargraphs2" multiple> 
 
     </select> 
 
     <p id="paraContent"> 
 
     </p> 
 
     <p id="paraContent2"> 
 
     </p> 
 

 
      
 
     
 
     
 
     </form>

Answer 2

一個解決辦法是把填充選擇元素成可重複使用的功能代碼：

var arr = [{ 
 
     "Content": ["<h2>Heading of Paragraph1</h2><p>the actual pargraph1</p>"], 
 
     "Titel": ["Heading of Paragraph1"] 
 
     }, 
 
     { 
 
     "Content": ["<h2>Heading of Paragraph2</h2><p>the actual pargraph2</p>"], 
 
     "Titel": ["Heading of Paragraph2"] 
 
     }, { 
 
     "Content": ["<h2>Heading of Paragraph3</h2><p>the actual pargraph3</p>"], 
 
     "Titel": ["Heading of Paragraph3"] 
 
     } 
 
    ]; 
 

 
const arr2 = [ 
 
    { 
 
     "Content": ["<h2>Heading of Paragraph4</h2><p>the actual pargraph4</p>"], 
 
     "Titel": ["Heading of Paragraph4"] 
 
     } 
 
];  
 

 
const fillSelect = (data, select) => { 
 
    // prepare the options first 
 
    var options = data.map(item => "<option value='" + item.Titel[0] + "'>"+ item.Titel[0] + "</option>").join(""); 
 

 
    //set all the options to select and then bind change event 
 
    select 
 
     .html(options) 
 
     .change(function() { 
 
      $("#paraContent").html(""); 
 
      var val = $(this).val(); 
 
      $("#paraContent").html(val.map(title => data.find(s => s.Titel[0] == title).Content[0]).join("</br>")) 
 
    }); 
 
} 
 

 
// Now you can reuse the code: 
 

 
fillSelect(arr, $('select[name=pargraphs]')); 
 
fillSelect(arr2, $('select[name=pargraphs2]')); 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <form action="/returnselected_paragraphs.js"> 
 
     <select name="pargraphs" multiple> 
 
     </select> 
 
     <select name="pargraphs2" multiple> 
 
     </select> 
 
     <p id="paraContent"> 
 
      
 
     </p> 
 
     <input type="submit"> 
 
     </form>