jQuery / Javascript如何使用Get解析HTML

Question

I have the following working code. This displays a drop down and also fetches a html file to be displayed:

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

I need to amend this to a few extra things.

Firstly, I need the drop down to auto submit when a choice is made.

I then need it to get the html file relevant to the choice, for example if they choose the "FML" option it will get the html file "FML_shares.html" if they choose "GBP" then it should get "GBP_shares.html" and finally if the choice doesn't have any html file related to it then an error should be displayed such as "no such file" etc.

Just to make it a little more complex, I don't want the whole file. The file has a table in it and I want to get the data from the first row of the table, for the first five columns of data and display those alone.

Thanks for any assistance, I've been searching for a solution for a while without any success and my JQuery/Javascript knowledge is very basic! (I've done something similar with PHP in the past but that's not an option here)

Answer 1

Well for the first point you could just run

$('#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.
});

If you want to parse the returned page and get only part of this we'd need to know the markup structure.

Answer 2

Seems like you just need to bind to the .change event of the dropdown you are creating to do the submission, which you can retrieve with .get . You can use jQuery to parse the html. It does a nice job of that:

.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 */ });
});

This code is untested, but hopefully you can follow the example. Also beware of GET caching.