Dependent dropdown не работает

Question

В этом коде ниже В обновленной части: есть 2 текстовых поля и 2 dropdown. Один выпадающий код - это код курса, а другой - код темы, когда я обновляю тему, выбирая код курса, соответствующий не отображает его, показывает пустой экран в раскрывающемся списке тематических кодов. Pls, кто мне помогает.

 View:Student_detail_view 


<section id="tables"> 
<script> 
jQuery(document).ready(function() { 
    oTable = jQuery('#studenttable').dataTable({ 
    "bJQueryUI": true, 
    "sPaginationType": "full_numbers" 

    }); 
    }); 
    </script> 
    <script type="text/javascript" charset="utf-8"> 
function get_studentdetails() { 

    var exam_name = jQuery('#exam_name_id').val(); 
    //alert("exam_name"+exam_name); 
    jQuery.ajax({ 
     data: { 
      exam_name: exam_name, 
     }, 
     type: 'POST', 
     url: 'student_site/studentupdate',   
     success: function(data){ 
     //alert("inside change"); 
      console.log(data); 
      jQuery('#details').html(data); 
      jquery('#deleting').html(data); 
     } 
    }); 
    jQuery(document).ready(function(){ 
    jQuery.ajax({ 
     data: { 
      exam_name: exam_name, 
     }, 
     type: 'POST', 
     url: 'student_site/studentcreate', 
     success: function(data){ 
     //alert("inside change"); 
      console.log(data); 
      jQuery('#crud').html(data); 
      jquery('#deleting').html(data); 
     } 
    }); 
    }); 
}  

function CheckBoxVerification(From) 
{ 
alert('hai'); 
    alert('hai:' $("table input[type=checkbox]:checked").length); 
    if(From == "Insert") 
    { 
     if(!!$('#rowInsert input:checked').length == false) 
     { 
      alert('please select at least one check box to Create ...!'); 
     } 
    } 

    if(From == "Update") 
    { 
     if(!!$('#rowUpdate input:checked').length == false) 
     { 
      alert('please select at least one check box to Update ...!'); 
     } 
    } 
} 
    function get_subjectdetails1() { 
    //var index = jQuery('#index').val(); 

    var course_name = jQuery('#course_name_id').val(); 
    //alert("course_name"+course_name); 
    var exam_name = jQuery('#course_name_id>option:selected').text(); 
    var exam_name = jQuery('#exam_name_id').val(); 
    var ssubject_code = jQuery('#ssubject_code_id').val(); 
    //var partsArray = exam_name.split('.'); 
    //alert("ssubject_code"+ssubject_code); 
    //alert("course_name"+course_name); 
    //alert("exam_name"+exam_name); 
    jQuery.ajax({ 
     data: 'exam_name='+exam_name+'&course_name=' + course_name, 
     type: 'POST', 
     url: 'student_site/subject_records', 
     success: function(data){ 
     //alert("inside change"); 
      console.log(data); 
      //alert ("data"+data); 
      //for(var j = course_name; j < ssubject_code; j++) 
     //{ 
      jQuery('#ssubject_code').empty().append(data); 
     //} 
     } 

    }); 
} 

</script> 

<?php 
    $attributes=array(
     'name'=>'updatecustomer', 
     'id'=>'updatecustomer' 
     ); 
    echo form_open('student_site/manage_student',$attributes); 
?> 
<div id="validation_failed"> 
    <?php 
     echo validation_errors(); 
    ?> 
    <?php $data = array(); 
     foreach ($course_records as $row) 
     { 
      $data[$row->course_code] = $row->course_code; 
     } 

     $subject_data = array(); 
     foreach ($all_coursesubject_records as $row) 
     { 
      $subject_data[$row->subject_code] = $row->subject_code; 
     } 


    ?> 
    <div id="Processy"> 
<table class="display table table-bordered table-striped" id='studenttable'> 
<thead> 
<tr font style='font-size:13px'> 
<th>&nbsp;</th> 
<th>&nbsp;</th> 
<th>Register Number</th> 
<th>Name </th> 
<th>Course Code</th> 
<th>Subject Code</th> 
</tr></thead> 
<?php if(isset($records)) : foreach($records as $row) : ?> 
<tr > 
<td> 
<?php echo anchor('student_site/delete/'.$row->id, 'Delete',array('onClick'=>"return confirm('Are you sure want to delete..?')")); ?> 
</td> 
<td id="rowUpdate"> 
<input type=checkbox name="editstudent[]" id="editstudent[]" value="<?php echo $row->id ?>"> 
</td> 
<td ><input class="inputmedium span2" type="text" name="register_number_<?php echo $row->id ?>" id="register_number_<?php echo $row->id ?>" value="<?php echo $row->register_number; ?>" ></td> 
<td ><input class="inputmedium span2" type="text" name="name_<?php echo $row->id ?>" id="name_<?php echo $row->id ?>" value="<?php echo $row->name; ?>" ></td> 

<td > 
<?php 

     $js = 'class="dropdown_class" id="course_code_id'.$row->id.'" onChange="get_subjectdetails112('.$row->id.')" '; 
     $js_name = 'course_code_id'.$row->id; 
     echo form_dropdown($js_name, $data, $row->course_code, $js); 
?> 
</td> 
<td>  

<?php 



     $js = 'class="dropdown_class" id="subject_code_id'.$row->id.'"'; 
     $js_name = 'subject_code_id'.$row->id; 
     echo form_dropdown($js_name, $subject_data, $row->subject_code, $js); 

?> 





</td> 

</tr> 
<?php endforeach; ?> 
</table> 
</div> 
<center> 
<br /><input type="submit" class="btn-success btn" value="Update Student"></center> 

<?php else : ?> 
<h2>No records were returned.</h2> 
<?php endif; ?> 





view:student_update: 

<script type="text/javascript" charset="utf-8"> 
function enableDisable(bEnable, textBoxID1, textBoxID2, chkBox) 
{ 
    document.getElementById(textBoxID1).disabled = !bEnable 
    document.getElementById(textBoxID2).disabled = !bEnable 
    document.getElementById(chkBox).disabled = !bEnable 
} 
</script> 

<script type="text/javascript" charset="utf-8"> 

function get_subjectdetails112(index) { 
alert ("enter first"); 
    //var index = jQuery('#index').val(); 
    //alert("index"+index); 
    var course_name = jQuery('#course_code_id'+index).val(); 
    alert("course_name"+course_name); 
    //var exam_name = jQuery('#course_name_id>option:selected').text(); 
    var exam_name = jQuery('#exam_name_id').val(); 
    var ssubject_code = jQuery('#subject_code_id'+index).val(); 
    //var partsArray = exam_name.split('.'); 
    //alert("ssubject_code"+ssubject_code); 
    //alert("course_name"+course_name); 
    //alert("exam_name"+exam_name); 
    jQuery.ajax({ 
     data: 'exam_name='+exam_name+'&course_name=' + course_name, 
     type: 'POST', 
     url: 'student_site/subject_records', 
     success: function(data){ 
     //alert("inside change"); 
      console.log(data); 
      //alert ("data"+data); 
      //for(var j = course_name; j < ssubject_code; j++) 
     //{ 
      jQuery('#subject_code_id'+index).empty().append(data); 
     //} 
     } 

    }); 
} 
function get_subjectdetails1(index) { 
alert ("enter first"); 
    //var index = jQuery('#index').val(); 
    //alert("index"+index); 
    var course_name = jQuery('#course_name_id'+index).val(); 
    alert("course_name"+course_name); 
    //var exam_name = jQuery('#course_name_id>option:selected').text(); 
    var exam_name = jQuery('#exam_name_id').val(); 
    var ssubject_code = jQuery('#ssubject_code'+index).val(); 
    //var partsArray = exam_name.split('.'); 
    //alert("ssubject_code"+ssubject_code); 
    //alert("course_name"+course_name); 
    //alert("exam_name"+exam_name); 
    jQuery.ajax({ 
     data: 'exam_name='+exam_name+'&course_name=' + course_name, 
     type: 'POST', 
     url: 'student_site/subject_records', 
     success: function(data){ 
     //alert("inside change"); 
      console.log(data); 
      //alert ("data"+data); 
      //for(var j = course_name; j < ssubject_code; j++) 
     //{ 
      jQuery('#ssubject_code'+index).empty().append(data); 
     //} 
     } 

    }); 
} 
function student_updatedetails() { 

     var register_number = jQuery('#register_number').val(); 
     var exam_name = jQuery('#exam_name_id').val(); 
     var name = jQuery('#name').val(); 
     var course_code = jQuery('#course_name_id').val(); 
     var subject_code = jQuery('#subject_name_id').val(); 
     //alert("register_number"+register_number+"name"+name+"exam_name: "+exam_name+"course_code"+course_code+"subject_code:"+subject_code); 
     jQuery.ajax({ 
     data: 'exam_name=' + exam_name + '&register_number=' + register_number + '&name=' + name + '&course_code=' + course_code + '&subject_code=' + subject_code, 
     type: 'POST', 
     url: 'student_site/update', 
     success: function(data){ 
      console.log(data); 
      jQuery('#details').html(data); 
     } 
    }); 

} 

function CheckBoxVerification(From) 
{ 
//alert('hi'); 
    if(From == "Insert") 
    { 
     if(!!$('#rowInsert input:checked').length == false) 
     { 
      alert('please select at least one check box to Create ...!'); 
     } 
    } 

    if(From == "Update") 
    { 
     if(!!$('#rowUpdate input:checked').length == false) 
     { 
      alert('please select at least one check box to Update ...!'); 
     } 
    } 
} 
</script> 




<br> 
<div class="page-header"> 
    <h1 class="colored"><small><a>Create Student</a></small></h1> 
    </div><br /> 
    <div class="well"> 
    <?php 
@$rcount=3; 
//echo "rcount:".$rcount; 
echo form_open('student_site/create_student/'.$rcount); ?> 

<table> 
<?php 

    $j=1; 
    while($j<=$rcount) 
    { 
?> 
<tr id="rowInsert"> 
<td> 
<input type=checkbox name="createstudent[]" id="createstudent[]" onclick="enableDisable(this.checked, 'register_number_<?php echo $j ?>','name_<?php echo $j ?>', 'course_name_id<?php echo $j ?>');" value="<?php echo $j ?>"> 
</td> 
<td><input type="text" id="register_number_<?php echo $j ?>" name="register_number_<?php echo $j ?>" required placeholder="Register_Number" class="span2" disabled="true"/></td> 
<td><input type="text" id="name_<?php echo $j ?>" name="name_<?php echo $j ?>" onblur="ucwords(this)" placeholder="Name" required class="span2" disabled="true"/></td> 

<?php 
$cnt=0; 
?> 
<td> 
    <?php 
     $data = array(
     ); 
     $data["Select Course Code"] = "Select Course Code"; 
     foreach ($course_records as $row) 
     { 

      $data[$row->course_code] = $row->course_code; 
     } 
     //echo form_dropdown('course_name', $data, 'small', 'class="dropdown_class span2" id="course_name_id" onChange="get_subjectdetails()"'); 

     $js = 'class="dropdown_class" id="course_name_id'.$j.'" onChange="get_subjectdetails1('.$j.')" disabled="true"'; 
     $js_name = 'course_name_id'.$j; 
     echo form_dropdown($js_name, $data, 'small', $js);  
?> 
<input type="hidden" name="index" id="index" value="<?php echo $j; ?>"/> 

</td> 
<td> 
<div id="ssubject_code<?php echo $j; ?>" ></div> 
<input type="hidden" name="ssubject_code" id="ssubject_code" value="ssubject_code<?php echo $j; ?>"/> 
</td> 
<?php 
    $j++; 
    } 
?> 

</tr> 
</table> 
<input type="hidden" name="exam_name" id="exam_name" value="<?php echo $exam_name; ?>"/> 
<input type="submit" value="Create Student" class="btn-success btn" onclick="CheckBoxVerification('Insert')"id="start_button"/> 


</div> 
<?php echo form_close(); ?> 





<br /> 
</center> 

Answer 1

Было бы неплохо иметь только соответствующий код, вместо того, чтобы попытаться выяснить, какой бит кода предполагается заполнение коробки. Я подозреваю, что это потому, что вы пытаетесь просто вывести значения в поле выбора, а не итерировать через массив и добавлять каждый вариант. Это кусок кода из одного из моих приложений, который очищает выпадающее меню и повторно заполняет его новыми значениями. Значения возвращаются с сервера в массив: AddressId => адрес

You should be able to see the parts that you need and modify it to your uses. 

function loadAddresses() 
{ 
    $.ajax({ 
     type: "POST", 
     url: "/aj_getAddresses/", 
     data: { companyId: $('#companyId').val() }, 
     dataType: "json", 
     success: function(data) { 
      if(data.status=="success") 
      { 
       $("#addressId").find('option').remove(); 

       $.each(data.addresses, function(key, val) { 
        $("#addressId").append(
         '<option value="' + key + '">' + val + '</option>' 
        ); 
       }); 
      } else { 
       $("#error").html(data.message); 
      } 
     }, 
     error: function(error) { 
     } 
    }); 
}