Question

我的代码没有显示来自my-page.php，Live demo的值，另外我想要defult显示selected值

$(document).ready(function() {
  var $loading = $('#loading');
  var $content = $("#content");

  $("#select123").change(function() {
    $loading.fadeIn();
    var value = this.value;
    $content.fadeOut(500, function() {
      $.ajax({
        url: 'my-page.php',
        type: 'GET',
        cache: false,
        success: function(html) {
          var $target = $(html).find('#' + value);
          $loading.fadeOut();
          $content.append($target).fadeIn();
        }
      });
    });
  }).change();
});

<select id="select123">
  <option value="content1" selected>content1</option>
  <option value="content2">content2</option>
  <option value="content3">content3</option>
  <option value="content4">content4</option>
</select>
<div id="content"></div>

<div id="progressbar">
  <span id="loading"></span>
  <div id="load">loading...</div>
</div>

MY-page.php文件

<body id="monica">
  <div id="content1" class="content123">
    text defult show
  </div>
  <div id="content2" class="content123">
    contentttttttt
  </div>
  <div id="content3" class="content123">
    content3
  </div>
  <div id="content4" class="content123">
    content4
  </div>
</body>

Answer 1

只需在服务器返回的html文本周围添加一个根标记，然后应用选择器：

var appendedHtml = $('#' + $('#select123').val(), $.parseHTML('<div>' + html + '</div>')).html()
$content.html(appendedHtml).fadeIn();

Answer 2

简单的方法就是像这样使用javaScript函数

> str(flat)
List of 10
 $ 1: chr "test1"
 $ 2: chr "test2"
 $ 3: chr "test3"
 $ 4: chr "test4"
 $ 1: chr [1:2] "test1" "test2"
 $ 2: chr [1:2] "test2" "test3"
 $ 3: chr [1:2] "test3" "test4"
 $ 1: chr [1:3] "test1" "test2" "test3"
 $ 2: chr [1:3] "test2" "test3" "test4"
 $ 1: chr [1:4] "test1" "test2" "test3" "test4"

在php页面中显示ajax中的值id

2 个答案: