动态填充表单中动态创建的元素的下拉列表

function flavorDefn(e) {
            var locationid = $(e).attr('id');

            var idArray = locationid.split('-');
            var id = idArray[1];
            var flavorDef="flavorDefs"+id;
             $("#"+flavorDef).prop("disabled", true);
            $.getJSON('flavorDefinitions.wss', {
                location : $(this).val(),
                ajax : 'true'
            }, function(data) {
                $("#"+flavorDef).prop("disabled", false);
                var html = '';
                var len = data.length;
                for ( var i = 0; i < len; i++) {
                html += '<option value="' + data[i].id+ '" id="'+data[i].id+'">'
                            + data[i].cpus+' CPU '+data[i].ram+' MB RAM '+data[i].disk+' GB DISK '+ '</option>';
                }
                html += '</option>';
                $("#"+flavorDef).html(html);
            });
        }

<select name="locationName" id="location-<%=patternBO.getId()%>" onchange="flavorDefn(this)">
<select name="flavorDefs" id="flavorDefs<%=patternBO.getId()%>">

在窗体中有2个下拉菜单，在页面加载后动态创建。 我写了一个jquery函数，当第一个下拉值发生变化时会被调用。 但是，当我尝试访问动态创建的表单字段值它说TypeError：e.nodeName是未定义的。

---

$(document).ready(){
    $('select[name="locationName"]').change(function(){
        var theValue = this.value;
        $('select[name="flavorDefs"]').val(theValue);
    });
});

的jsfiddle

---

如果在最初呈现DOM之后填充选择项，则可以使用事件委托来捕获事件：

<script>
$(document).ready(){
    $(document).on('change', 'select[name="locationName"]', function(){
        var theValue = this.value;
        $('select[name="flavorDefs"]').val(theValue);
    });
});
</script>

参考：

http://davidwalsh.name/event-delegate

我如何使用jQuery按名称选择元素？

链接地址: http://www.djcxy.com/p/36279.html

上一篇: Dynamically populate the drop down for dynamically created elements in the form

下一篇: Set textbox value by array index and name attribute using jquery