Question

我有一个动态表单，其中包含通过jquery生成的字段。我从mysql表中提取值。我有一个包含三个值的选择字段。如果选择了第三个值Other，我尝试触发change事件以显示隐藏的输入字段。虽然当选项值为3的选择字段发生更改时，我有函数触发器，但没有结果或响应。选择值为3的选项时，如何显示隐藏字段？ DEMO

$('select').change(function() {
var option = $(this).val();
showFields(option);
return false;
    });
function showFields(option){ 

    var content = '';
    for (var i = 1; i <= option; i++){
        content += '<div id="course_'+i+'"><label>Course # '+i+'</label><br /><label>Course Name:</label> <select id="coursename_'+i+'" name="coursename_'+i+'"><option value="">--- Select ---</option>"'
                <?php
                    $course_query = $db_con->prepare("SELECT course_id, course_name FROM courses_selection_list ");
                    $course_query->execute();
                    $data = $course_query->fetchAll();
                    foreach ($data as $row){
                            //dropdown values pulled from database
                       echo 'content += \'<option value="' . $row['course_id'] .'">' . $row['course_name'] . '</option>\';';
                    }

                ?>
        '"';                   

    content += '</select><input type="text" id="#newCourse_'+i+'" name="#newCourse_'+i+'" style="display:none;" /></br></div>';

    $('#coursename_'+i).change(function() {
    if($(this).val() == 3)
        $('#newCourse_'+i).show();
    else
        $('#newCourse_'+i).hide();
    });

}
    $('#course_catalog').html(content);

}
});

HTML

<select name="courses_offered" id="courses_offered">
<option value="default">---Select---</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
</select>
<div id="course_catalog"></div>

Answer 1

                       <script>
    $(document).ready(function() {
        $('select').change(function() {
            var option = $(this).val();
            showFields(option);
            return false;
        });
        function showFields(option) {

            var content = '';
            for (var i = 1; i <= option; i++) {
                content += '<div id="course_' + i + '"><label>Course # ' + i + '</label><br /><label>Course Name:</label> <select id="coursename_' + i + '" name="coursename_' + i + '" class="ddlcss"><option value="">--- Select ---</option>"'
                content += '<option value="1">Biology</option>'; content += '<option value="2">Calculus</option>'; content += '<option value="3">Other - Not Listed</option>'; '"';

                content += '</select><input type="text" id="#newCourse_' + i + '" name="#newCourse_' + i + '" style="display:none;" /></br></div>';
            }
            $('#course_catalog').html(content);
        }
    });

        $('.ddlcss').live('change',function() {
            if ($(this).val() == 3)
                $(this).next().show();
            else
                $(this).next().hide();
        })

</script>

请这样做。在这里我用select标签添加一个类，然后在Live函数的帮助下添加事件。但对于实时功能，你必须使用最新的jquery版本。

Answer 2

尝试像这样更改change事件处理

$(document).on('change',".ddlcss", function(){

            if ($(this).val() == 3)
                $(this).next().show();
            else
                $(this).next().hide();
});

使用on和off来绑定动态创建元素的事件总是好的

live demo

选择选项时显示隐藏字段

2 个答案: