您好，我想根据业务 2 和业务 2 的数据根据 Business1 的下拉列表显示业务 3 的数据，但在业务 1 的 change（） 上，我得到了数据作为响应，但我在下拉列表中的 change（） 上没有得到第二名。
<!-- 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>
也许这是因为通过调用$('#business2').html(data);，您可以从jQuery文档中删除事件处理程序： http://api.jquery.com/html
当 .html（） 用于设置元素的内容时，任何 在该元素中完全被新内容替换。 此外，jQuery删除了其他结构，如数据和事件。 子元素中的处理程序，然后用 新内容。
一种选择是使用这样的empty和append
$('#business2').empty();
$('#business2').append(data);
而不是$('#business2').html(data);
不适合
您的脚本!!
<script>
$(document.body).on('change','#business2',function(){
alert('Change Happened');
});
</script>
尝试用这个代替上面的脚本：
$(document).on("change", "#business2", function(){
alert('Change Happened');
});