Question

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未定义。

Answer 1

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

jsFiddle

如果在最初呈现DOM之后填充了select，则可以使用事件委派来捕获事件：

<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

How can I select an element by name with jQuery?

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

1 个答案: