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

一种解决方案是将填充select元素的代码转换为可重用的函数：

＆＃13;

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]'));

＆＃13;

    <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>

＆＃13;

Answer 2

来自@coderbyheart的代码覆盖了段落的内容，所以我把它作为一个额外的参数。这就是我想要的

＆＃13;

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" ));

＆＃13;

    <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>

＆＃13;

使用select元素过滤几个json文件

2 个答案: