Display a value id in ajax from the php page

Question

My code does not display value from my-page.php , Live demo ,Also I want to defult show the selected value

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

Just add a root tag around the html text returned from the server and apply the selector afterwards:

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

Answer 2

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

<select id="select123" onchange="update_content();">

Display a value id in ajax from the php page

Question

2 answers

solution1
1 ACCPTED 2018-01-13 15:14:25

solution2
0 2018-01-13 14:54:16

Display a value id in ajax from the php page

Question

2 answers

solution1 1 ACCPTED 2018-01-13 15:14:25

solution2 0 2018-01-13 14:54:16

solution1
1 ACCPTED 2018-01-13 15:14:25

solution2
0 2018-01-13 14:54:16