Question

如果没有列出，我试图动态地向选择字段添加值。我有通过jquery生成的动态字段。我通过表courses_selection_list中的mysql fetch查询填充这些select字段值。生成的每个选择字段有三个选项。只有选择了选项Other – Not listed时，才会显示隐藏的div节目。隐藏div中的输入显示我从ajax调用中提取的唯一ID号值。每次在不同的选择字段中选择Other – Not listed时，我现在很难尝试将值递增1。如何将此初始值增加1？ DEMO或Fiddle

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

var $increment_num = $('#course_increment_num');
var interval = 1000;  //3000 = 3 seconds
function getCourseId() {
    $.ajax({
        type: 'POST',
        url: 'courseAutoIncrement.php',
        data: $(this).serialize(),
        dataType: 'json',
        success: function (data) {
            var $cloned = $('#course_catalog');    
            var num = parseInt(data);
            $increment_num.val(num);

            $cloned.each(function(i){
                var $this = $(this);
                $this.find('[name^="new_course_"]').first().val(num+i);
            })
        },
        complete: function (data) {
            // Schedule the next
            setTimeout(getCourseId, interval);
        }
    });
}

setTimeout(getCourseId, interval);

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="course_list"><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><div class="hideNewCourse" style="display:none;">Course ID<input type="text" id="new_course_'+i+'" name="new_course_'+i+'"/><label for="newCourse_'+i+'">Add Course Name to List:</label><input type="text" id="newCourse_'+i+'" name="newCourse_'+i+'"/></div></div>';
    }

  $(document).on('change', "[id^=coursename_]", function () {
        var $this = $(this);
        if ($this.val() == "3") {
           $(this).closest('div').find(".hideNewCourse").show();
        } else {
            $(this).closest('div').find(".hideNewCourse").hide();
        }
    });

    $('#course_catalog').html(content);
}
});
</script>

HTML

Increment By: <input type="text" id="course_increment_num" value="" readonly></br>
<strong>How many courses offered?</strong>
<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

这应该这样做：

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

$('#course_catalog').find('[id^=coursename_]').on('change', function(){ 
    var $this = $(this); 
    if($this.val() == 3){ 
        $('input[id^=new_course_]').each(function(index){
           var start = parseInt($('#course_increment_num').val(), 10);
           $(this).val(start+index);
       })
    }
});

您还需要在.each成功回调中运行ajax循环，以确保id是最新的

Answer 2

您可以将值存储在javascript中的全局变量中，并在每次选择Other - Not Listed时将其递增。像这样：

var globalValue = 0;
$(document).on('change', "[id^=coursename_]", function () {
    var $this = $(this);
    if ($this.val() == "3") {
        globalValue++;
        $(this).closest('div').find(".hideNewCourse").show();
    } else {
        $(this).closest('div').find(".hideNewCourse").hide();
    }
});

添加值以动态选择字段

2 个答案: