时间戳

首页 > 解决方案 > onchange 事件不起作用。选择来自控制器的下拉菜单

php - onchange 事件不起作用。选择来自控制器的下拉菜单

问题描述

我有一个选择下拉列表，它来自使用 JSON 的控制器并显示在视图页面上。

现在我的更改事件不起作用。如果我直接在视图上添加了一个选择下拉菜单，那么它可以工作，但它来自不工作的控制器。

控制器

$code.= '<!--more HTML code here-->

 I have more html code here

 <select name="yearDropdown"  class="form-control dropdownDuration">
 <option selected disabled >Select duration</option>  
 <option value="12m" <?php if($product['options']['duration'] == "12m"){ echo 'selected="selected"';} ?> >1 Year</option>
 <option value="6m" <?php if($product['options']['duration'] == "6m"){ echo 'selected="selected"';} ?>>6 months</option>
 </select>

I have more html code here

    <!--more HTML code here-->
    ';

更改脚本

$('.dropdownDuration').change(function () {
alert('hello');
});

AJAX

$(document).ready(function(){
$.ajax({ url:baseUrl+"/Member_controller/Section",
       // context: document.body,
       dataType: "json",
        success: function(data){
           //alert("done");
          //alert(data);

          $('#ProcessModel').html(data);
        }});

});

看法

<div id="ProcessModel"></div>

标签： phpjqueryhtmlcodeigniter-3onchange

解决方案

因为.ajax()是异步的，所以您需要委托更改事件，因为 select 元素（即：dropdownDuration）尚不存在：

$('button').on('click', function(e) {
    var data = '<!--more HTML code here-->' +
            '<select name="yearDropdown"  class="form-control dropdownDuration">' +
            '<option selected disabled >Select duration</option>' +
            '<option value="12m">1 Year</option>' +
            '<option value="6m">6 months</option>' +
            '</select>' +
            '<!--more HTML code here-->';
    $('#ProcessModel').html(data);
})

$('#ProcessModel').on('change', '.dropdownDuration', function () {
    console.log('hello: ' + this.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="ProcessModel"></div>
<button>Simulate ajax</button>

推荐阅读