动态添加值以选择字段答案

【问题标题】：Add values to select field dynamically动态添加值以选择字段
【发布时间】：2013-12-11 10:35:15
【问题描述】：

如果未列出，我正在尝试将值动态添加到选择字段。我有通过 jquery 生成的动态字段。我通过表courses_selection_list 中的mysql fetch 查询填充这些选择字段值。生成的每个选择字段都有三个选项。我只有在选中选项 Other – Not listed时才有一个隐藏的div节目。隐藏 div 中的输入显示了我从 ajax 调用中提取的唯一 id 数字值。现在，每次在不同的选择字段中选择 Other – Not listed 时，我都难以尝试将值增加一。我怎样才能将这个初始值加一？ 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>

【问题讨论】：

标签： javascript jquery

【解决方案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);
       })
    }
});

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

【讨论】：

Rob, #course_increment_num 保存来自 ajax 调用的初始值。选择选项时 Others-Not listed将显示一个曾经隐藏的 <div> with Input Course ID<input type="text" id="new_course_'+i+'" name="new_course_'+i+'"/><label for="newCourse_'+i+'">我需要该值才能显示在该输入字段中，然后随后在所有其他时间 Others - Not listed选择。再次感谢您的帮助。你似乎是唯一一个懂我的人。如需澄清，请检查此 -> DEMO 并附上您应用的答案。
太棒了！它现在几乎走到了一起。是的，现在如果#course_increment_num 更改它只会更新第一个。所以你提到了.each 循环。如果#course_increment_num 发生变化，是否需要添加$this.find('[id^="new_course_"]').next().val((num+i)+1); 才能更新所有字段？
在您的 Ajax 成功回调中的 $cloned.each 之后，在我的答案中准确运行每一个
现在又一期很抱歉给您添麻烦了。如果我在选择字段 1 和 2 中选择 Other- Not listed。然后返回并更改第一个选择的选项，第二个选择字段中 #new_course_2 的值不会更新。我需要清除该值吗？
是的，这应该是 if val == 3 部分中的 else 语句

【解决方案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();
    }
});

【讨论】：