Question

我仍然很好奇为什么我不能在<p>内添加select2元素（来自bootstrap）。

我有2个文件

order.php：

<link rel="stylesheet" href="assets/css/font-icons/entypo/css/entypo.css">
        <link rel="stylesheet" href="assets/css/bootstrap.css">
        <link rel="stylesheet" href="assets/css/neon-core.css">
        <link rel="stylesheet" href="assets/css/neon-theme.css">
        <link rel="stylesheet" href="assets/css/neon-forms.css">

        <!-- Imported styles on this page -->
        <link rel="stylesheet" href="assets/js/select2/select2-bootstrap.css">
        <link rel="stylesheet" href="assets/js/select2/select2.css">

        <!-- Bottom scripts (common) -->
        <script src="assets/js/gsap/main-gsap.js"></script>
        <script src="assets/js/joinable.js"></script>
        <script src="assets/js/resizeable.js"></script>
        <script src="assets/js/neon-api.js"></script>
        <script src="jquery-3.1.1.js"></script>

        <!-- Imported scripts on this page -->
        <script src="assets/js/select2/select2.min.js"></script>
        <!-- JavaScripts initializations and stuff -->
        <script src="assets/js/neon-custom.js"></script>

    <?php 
    if($_POST['type_order']=="Personal"){
    ?>
   <span>
    <select name="personal_order" class="select2">
    <option value="person1">Person 1</option>
    <option value="person2">Person 2</option>
    <option value="person3">Person 3</option>
    </select>
  </span>
    <?php }else{?>
  <span>
    <select name="company_order" class="select2">
    <option value="company1">Company 1</option>
    <option value="company2">Company 2</option>
    <option value="company3">Company 3</option>
    </select>
  </span>
    <?php }?>

main_form.php：

＆＃13;

$(document).ready(function()
{
  $(document).on( 'change', '.typeorder', function()
    {

        var type_order=$("#typeorder").val();
        
         $.ajax
        ({
            type: "POST",
            url: "order.php",
            data: {type_order:type_order},
            cache: false,
            success: function(html)
            {
                $(".order").find('span').remove();

                $(".order").find('p').append(html);

            } 
        });

    });

＆＃13;

   <select name="x_type_order" id="typeorder" class="typeorder select2">
   <option>Choose order</option>
   <option value="Personal">Personal</option>
   <option value="Company">Company</option>
   </select>                   
<div class="order">
<p>
</p>  
</div>

＆＃13;

p中附加的select2元素没有显示出来但如果我检查使用检查元素它是否正确添加，为什么会这样呢？

Answer 1

而不是找到p elem，为什么不尝试直接获取它们？这可能是许多方法之一$（＆＃34; .elem p＆＃34;）。append（string）;

    var type_order=$("#typeorder").val();

    $.ajax
    ({
        type: "POST",
        url: "order.php",
        data: {type_order:type_order},
        cache: false,
        success: function(html)
        {
            $(".order span").remove();

            $(".order p").append(html);

        } 
    });

https://jsfiddle.net/dw09h9oj/1/

无法在<p>中附加select2元素

1 个答案: