jQuery / Javascript如何使用Get解析HTML

Question

我有以下工作代码。 这将显示一个下拉列表，并且还提取了要显示的html文件：

   $.getJSON('json/shares.json', function(data) {
      var items = [];

      $.each(data.Shares, function(key, val) {
        items.push('<option id="' + val.shareID+ '">' + val.shareID+ '</option>');
      });

      $('<select/>', {
        'id': 'shares',
        html: items.join('')
      }).appendTo('#shares');
    });
    </script>

    <script type="text/javascript">

    $.get('lon_shares.html', function(data){
        $(data).appendTo('#shares');
    });

    </script>   

我需要对此进行一些补充。

首先，我需要下拉菜单以在做出选择时自动提交。

然后，我需要它来获取与选择相关的html文件，例如，如果他们选择“ FML”选项，则他们将获得html文件“ FML_shares.html”；如果他们选择“ GBP”，那么它将获得“ GBP_shares.html”最后，如果该选择没有任何与之相关的html文件，则应显示错误，例如“无此文件”等。

为了使其更加复杂，我不需要整个文件。 该文件中有一个表，我想从表的第一行获取数据的前五列，并单独显示它们。

感谢您的协助，一段时间以来我一直在寻找解决方案，但没有成功，我的JQuery / Javascript知识非常基础！ （过去我已经用PHP做过类似的事情，但这不是这里的选择）

Answer 1

首先，您可以运行

$('#shares').on('change', function(){
    var val = $(this).val();
    //submit another ajax request with this value, and get the relevant page, then you'd just need to parse it for the appropriate content from that page.
});

如果您想解析返回的页面并仅获取其中的一部分，我们需要知道标记结构。

Answer 2

似乎您只需要绑定到要创建的下拉列表的.change事件即可进行提交，您可以使用.get进行检索。 您可以使用jQuery解析html。 它做得很好：

.appendTo('#shares')
.change(function () {
   $.get($(this).val() + '_shares.html)
      .done(function (html) {
         var $table = $(html).find("table tr:first td").slice(0,5);
      })
      .fail(function () { /* no such file */ });
});

该代码未经测试，但是希望您可以按照以下示例进行操作。 还要提防GET缓存。