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>

Answer 2

如果您想在没有任何数据库的情况下从中加载列表。也许可以使用所有选项创建一个文件，并将此文件包含在要使用它的文件中。使用此选项，您只需更改一个文件即可更改其他所有文件。

Answer 3

完成此类工作的最理想方式是设置数据库并将值存储在数据库中。您稍后还可以使用更新网站值的功能。

如果您不使用数据库，您实际上可以将值列表存储到xml或json文件中，然后在jquery中使用ajax来加载信息并将其设置为html。您可以查看此链接，了解ajax的工作方式http://api.jquery.com/jquery.ajax/

获得数据后，更新html的jquery将如下所示。

mydata.forEach(
    function(s){
        $("select").append($("<option>").attr("value", s).text(s));
    }
);

mydata是您的数据数组。当然，代码需要多次更新，例如为您的选择设置ID。然而，这是基本的想法。

Answer 4

使用jquery，您可以使用此示例：

<!doctype html>

    <html>

    <head>
        <title>Page Title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1.0">
        <style>
            .link-item {
                display: block;
                min-width: 100px;
                margin-top: 15px;
                font-size: 14px;
            }

        </style>
    </head>

    <body>
        <select class="target-combo">
          <option value="apple.html">Apple</option>
          <option value="ball.html">Ball</option>
          <option value="cat.html">Cat</option>
        </select>
        <select class="target-combo">
          <option value="apple.html">Apple2</option>
          <option value="ball.html">Ball3</option>
          <option value="cat.html">Cat3</option>

        </select>
        <div id="linksWrapper"></div>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
        <script>
            $(document).ready(function() {

                var comBoOptions = $("select.target-combo").children("option");

                var links = [];
                comBoOptions.each(function() {
                    links.push("<a href='" + $(this).val() + "' class='link-item' >" + $(this).text() + "</a>");
                });

                $("#linksWrapper").html(links.join(""));

            })

        </script>
    </body>

    </html>

Answer 5

<select onchange="location = this.value;">
  <option value="apple.html">Apple</option>
  <option value="ball.html">Ball</option>
  <option value="cat.html">Cat</option>
</select>

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

5 个答案: