添加值以动态选择字段 [英] Add values to select field dynamically

问题描述

我试图将值动态添加到选择字段(如果未列出).我有通过jquery生成的动态字段.我通过从表courses_selection_list的mysql fetch查询填充这些选择字段值.生成的每个选择字段都有三个选项.我只有在设置选项选择了一个隐藏的div表演.隐藏的div中的输入显示了我从ajax调用中提取的唯一ID号值.现在，每次在不同的选择字段中选择Other – Not listed时，都很难尝试将值增加一.如何将此初始值加1? DEMO 或

I am trying to add values to a select field dynamically if there not listed. I have dynamic fields generated through jquery. I am populating these select field values through mysql fetch query from table courses_selection_list. Each select field generated has three options. I have a hidden div show only if option Other – Not listed is selected. The input in the hidden div shows a unique id number value I pull from an ajax call. I am now having difficulties trying to increment the value by one every time Other – Not listed is selected in different select fields. How can I increment this intial value by one? DEMO or 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>

推荐答案

这应该做到:

...
$('#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);
       })
    }
});

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

You will also need to run that .each loop in your ajax success callback to ensure that the id is up to date

这篇关于添加值以动态选择字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！