Dynamically populate the drop down for dynamically created elements in the form

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()%>">

In the form there are 2 drop down which are created dynamically after the page loads. I have written a jquery function which will be called when 1st drop down value changes. But when I try to access the dynamically created form field value it says TypeError: e.nodeName is undefined.

---

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

jsFiddle

---

If the select is populated after the DOM is initially rendered, you can use event delegation to catch the event:

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

Reference:

http://davidwalsh.name/event-delegate

How can I select an element by name with jQuery?

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

上一篇: php：具有搜索功能的数组中的多个选择框

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