Question

任何人都可以帮助我使用我的ajax和jquery，我的ajax就在这里：

function dropdown(elem){

            var typeid = $('#type').val();
            $.post('<?php echo base_url("admin/ajaxGetType"); ?>',
                /* post form field's value */
                { 'provid':typeid,},

                /* web server responds to the request */
                function(result) {$(this).closest('#sortable').children('#div_replace').html(result);   
                    console.log($(this).closest('#sortable'));

                },

                "html"

            );
}

我的HTML就在这里

<div class="contain" id="sortable">
                <select class="form-control" id="type" onchange="dropdown(this)">
                    <option value="0">Choose Type</option>
                    <option value="1">form 1</option>
                    <option value="2">form 2</option>
                    <option value="3">form 3</option>
                    <option value="4">form 4</option>
                    <option value="5">form 5</option>
                </select>

                <span id="div_replace">
            </span>

         </div>
    <div class="contain" id="sortable">
                <select class="form-control" id="type" onchange="dropdown(this)">
                    <option value="0">Choose Type</option>
                    <option value="1">form 1</option>
                    <option value="2">form 2</option>
                    <option value="3">form 3</option>
                    <option value="4">form 4</option>
                    <option value="5">form 5</option>
                </select>

                <span id="div_replace">
            </span>

         </div>

我的html是动态添加，就像这个fiddle，但它与这个小提琴无关。

我正在做的是

- ＆GT; onchange select
- ＆gt;触发功能
- ＆gt; getparent
- ＆gt;把孩子送到id = div_replace
- ＆gt;然后把html结果

但那不起作用。

请允许任何人帮我解决这个问题！

同样的方法或更好的方法很好，

提前致谢

Answer 1

由于ID是唯一的，我会采用更简单的方法来选择和更新元素

$.post( "<?php echo base_url("admin/ajaxGetType"); ?>", function( result) {
  $("#div_replace").html (result);
});

Answer 2

使用追加事件

function dropdown(elem){

            var typeid = $('#type').val();
            $.post('<?php echo base_url("admin/ajaxGetType"); ?>',
                /* post form field's value */
                { 'provid':typeid,},

                /* web server responds to the request */
                function(result) {
                    $("#div_replace").append(result);    
                },

                "html"

            );
}

Answer 3

作为页面中的有效标记，您必须为每个元素使用唯一ID，因此在您当前的标记中，您会多次重复相同的ID。

要克服这类问题，您可以将ID更改为类名，最好使用javascript不引人注目的方式：

HTML：

<div class="contain sortable">  //<---changed id to class here
   <select class="form-control type">//<---changed id to class here
      <option value="0">Choose Type</option>
      <option value="1">form 1</option>
      <option value="2">form 2</option>
      <option value="3">form 3</option>
      <option value="4">form 4</option>
      <option value="5">form 5</option>
   </select>
   <span class="div_replace"></span> //<---changed id to class here
</div>

JQuery的：

function dropdown(typeval) {  //<----get the value here
    $.post('<?php echo base_url("admin/ajaxGetType"); ?>', {
        'provid': typeval //<---pass it here
    },
    function (result) {
        $(this).closest('.sortable').find('.div_replace').html(result);
        console.log($(this).closest('.sortable'));
    }, "html");
}

// and call it in here

jQuery(document).ready(function($){
   $('.sortable').on('change', '.type', function(){
        dropdown(this.value);  //<----pass the value here
   });
});

Answer 4

尝试这样的事情

function dropdown(elem){
    var typeid = $('#type').val();
    var div_replace = $(elem).closest('#sortable').children('#div_replace');
    // var div_replace = $(elem).next(); another selector
    $.post('<?php echo base_url("admin/ajaxGetType"); ?>',
        /* post form field's value */
        { 'provid':typeid,},

        /* web server responds to the request */
        function(result) {
            div_replace.html(result);
        },
    );
}

选择器你可以使用

var div_replace = $(elem).closest('#sortable').children('#div_replace');
var div_replace = $(elem).closest('#sortable').find('#div_replace');
var div_replace = $(elem).parent().find('#div_replace');
var div_replace = $(elem).next();

如何将ajax结果添加到动态添加的容器中？

4 个答案:

HTML：

JQuery的：