javascript - 有没有办法从选择标签选项列表值生成 html 链接？

Question

假设我有一个文件“file.html”，其内容为:

<select>
  <option vale="apple.html">Apple</option>
  <option vale="ball.html">Ball</option>
  <option vale="cat.html">Cat</option>
</select>

现在我希望此文件中每个选项标记的值和名称显示在另一个文件“new.html”中，如下所示:

<a href="apple.html">Apple</a>
<a href="ball.html">Ball</a>
<a href="cat.html">Cat</a>

实现这一目标的最佳方法是什么？而且这必须是动态的，以便在“file.html”中添加新选项标记时，更新后的选项标记的值和名称会自动显示在 new.html 中。我的全部目的是维护一个通用文件，以独立于该通用文件来获取选择选项列表和html链接。更改该通用文件中的数据将自动触发不同文件中选项列表和html链接的更改。在这种情况下，一个常见的就是“file.html”。

也欢迎任何有关如何以不同方式实现结果的建议。预先感谢您。

Answer 1

您可以使用localStorage存储每个链接并访问其他页面。

使用 JQuery 库让生活更轻松。

将此作为引用:

在你的 file.html 上

  <select id="linkList">
    <option value="facebook.com" >Facebook</option>
    <option value="google.com" >Google</option>
    <option value="yahoo.com" >Yahoo</option>
  </select>

在你的 new.html 上

  <div id="links">

  </div>

JavaScript:

<script>
    $(document).ready(function(){
      var linkList = [];
      $('select#linkList').children('option').each(function(i,v){
        linkList.push( $(this)[0].value );
      });
      localStorage.setItem( 'linkList', linkList );
      var links = localStorage.getItem( 'linkList' );
      var linksArray = links.split(',');
      var template = '';
      var link = linksArray.map(function(value, index){
        return '<a href="http://www.'+value+'">'+value.replace('.com','').toUpperCase()+'</a><br/>';
      });
      $('#links').html(link);
      //console.log(linksArray);
    });
</script>