Question

Onload必须加载第一个选项值。
在值更改时，必须在AJAX容器中加载HTML。
在通过ajax加载时，它必须仅从“ajax-container”div id中提取。必须做这个过滤器。

请检查以下HTML和JS创建和工作。

HTML

 <select id="testElement">
 <option value="test1.html">Test1</option>
 <option value="test2.html">Test2</option>
 </select>

 <div id="container">
 </div>

test1.html

 <div id="ajax-container">
      <section>
           <div>Test 1234</div>
      </section>
 </div>

 <div id="other-container">
 <section>
           <div>Test 4567</div>
      </section>
 </div>

JS

 //On page load.. load with first option value "test1.html"
 $('#container').load($('#testElement option:first-child').val());

 //on option change, load htmls based on the value inside the AJAX container.
 $('#testElement').on('change', function(){
      var value = $(this).val();
      $.ajax({
          data: {valueType: value, html: encodeURIComponent($('#container').html(data))},
       });
 });

Answer 1

如果我已正确理解您的问题，那么您可以使用以下jQuery代码而不是现有代码：

// change event handler
$("#testElement").on("change", function(e) {
    var ajaxURL = $(this).val();
    $.ajax({
        url: ajaxURL,
        success: function(data) {
            var htmlData = $(data);
            $("#container").html(htmlData.filter("#ajax-container").get(0).outerHTML);
        }
    });
});

// use the same handler on page load to load first element data
$("#testElement").trigger("change");

这只有在test1.html和test2.html与主页面处于同一级别时才有效。

在更改时通过带有DIV ID过滤器的AJAX加载HTML

1 个答案: