Question

您好我想根据business1的下拉列表显示business3＆business2的数据，但是在business1的更改（）中我获得了数据响应但我在下拉列表中没有获得第二次更改（

<!-- ajax code for first business starts here -->

            <script>
                    $(document).on('change', 'select.Business1', function(){
                           var business1 = $('select.Business1 option:selected').val();
                           alert(business1);
                           var value = $(this).val();

                           $.ajax({
                                type:"POST",
                                data: { business1:business1 },
                                url: '<?php echo site_url('client_area/select_business_sub_cat'); ?>',
                                success : function (data){

                                        $('#business2').empty();
                                        $('#business2').append(data);
                                }
                           });
                    });
            </script>


<!-- ajax code for first business ends here -->

//此脚本无效。我无法找到第二次更改事件。

<!-- ajax code for second business starts here -->

            <script>
                    $(document).on('change','#business2',function(){
                    alert('Change Happened');
                    });
            </script>


<!-- ajax code for second business ends here -->

我已尝试使用live（）方法，因此在首次下拉选择时调用警报，然后调用ajax请求，以便第二次下拉填充（替换为第二个脚本），

<script>
                   $(document).live('change', '#business2', function() {
                      alert('Change Happened');
                    });
</script>

模型功能

public function select_business_sub_cat()
    {
        $business1 = $this->input->post('business1');
        $result_sub_cat1 = $this->db->query("select category.id,subcategory.* From category LEFT JOIN subcategory ON category.id = subcategory.category_id where category.id = '$business1'");
        $row_cat1 = $result_sub_cat1->result();

        $data = array(
            'id' => $row_cat1['0']->id,
            'name' => $row_cat1['0']->name
            );
        echo "<option value='" . $row_cat1['0']->id . "'>" . $row_cat1['0']->name . "</option>"; 
        // return $this->output->set_output($data);  
    }

查看 -

<div class="form-group">
                                <label>Business 1</label>
                                <select name="txtBusiness1" id="" style="height: 30px;width: 100%;" class="Business1">
                                                 <option value=""> Select Business </option>
                                                 <?php 
                                                 $result_cat1 =  $this->db->query("select * from category");
                                                 $row_cat1 = $result_cat1->result();
                                                 ?>
                                                <?php foreach($row_cat1 as $item){ ?>
                                                <option value="<?php echo $item->id; ?>"><?php echo $item->name; ?></option>
                                                <?php } ?>
                                </select>                        
                         </div>
                         <div class="form-group">
                                <label>Business 2</label>
                                <select name="txtBusiness2" id="business2" style="height: 30px;width: 100%;" class="Business2">
                                                 <option value=""> Select Business2 </option>
                                </select>                        
                         </div>
                         <div class="form-group">
                                <label>Business 3</label>
                                <select name="txtBusiness4" id="business3" style="height: 30px;width: 100%;" class="Business3">
                                                 <option value=""> Select Business3 </option>
                                                 <?php echo $abc; ?>
                                </select>                        
                         </div>

Answer 1

也许是因为通过调用$('#business2').html(data);从jQuery文档中删除了事件处理程序：http://api.jquery.com/html

当.html（）用于设置元素的内容时，任何内容都是在该元素中完全被新内容所取代。此外，jQuery 删除了其他构造，如数据和事件在使用。替换这些元素之前，来自子元素的处理程序 新内容。

一种选择是像这样使用empty和append

$('#business2').empty();
$('#business2').append(data);

而不是$('#business2').html(data);

Answer 2

不适合你的剧本!!!

         <script>
                $(document.body).on('change','#business2',function(){
                alert('Change Happened');
                });
        </script>

尝试使用此代替上述脚本：

$(document).on("change", "#business2", function(){
   alert('Change Happened');
 });

在更改不在嵌套下拉列表中工作

2 个答案: