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緩存。