jquery - 如何设置动态下拉列表的选定值

Question

首先，我有 3 个单选按钮，可供选择其中一个。

接下来，当您选择后，您将拥有依赖的动态下拉列表。

我希望当用户提交表单并且存在验证错误时，显示单选按钮和下拉列表中的选定值，而不是再次选择它们。

首先，我必须对名为“role_id”的单选按钮执行此操作。我已经尝试针对地区这样做，但我不确定具体该怎么做。

编辑:我为广播制作了它(检查我编辑的代码)。但下拉菜单对我来说很困难，因为我是 jQuery 新手。你可以帮帮我吗？提前致谢! :)

我正在使用 CodeIgniter。我的看法是:

          $(document).ready(function(){
              $(":radio").click(function(){
                  $('#region').val('Choose region');
                  $('#school').val('Choose region');
                  $('#teacher').val('Choose school');
                  $('#class').val('Choose class');
                  $('#class_divisions').val('Choose division');
              });
          });
         

  

        $(document).ready(function(){
           if($('#radio1').is(':checked') || $('#radio2').is(':checked'))  {

            var dropDown = document.getElementById("region");
            var region = dropDown.options[dropDown.selectedIndex].value;

             $('.toggle').show();
             }
          });

         function showHide(self, show){

                  $(".all_teachers_show, .toggle, .school,  .teacher_school, .teacher, .class, .teacher_class").hide();
         
                  if (show)
                      $('.toggle').show();
                  else
                      $('.toggle').hide();
                  $(":radio").prop('checked',false);
                  $(self).prop('checked',true);
              }
              
              function show(yes, no){
                  if (no)
                      $('.school').show();
                  else
                      $('.school').hide();
                  $("region").prop('checked',false);
                  $(yes).prop('checked',true);
              }
          

  

          $(document).ready(function() {
                    $('#region').change(function() {
                        var url = "<?= base_url() ?>index.php/home/get_schools";
                        var postdata = {region: $('#region').val()};
                        $.post(url, postdata, function(result) {
                            var $school_sel = $('#school');
                            $school_sel.empty();
                            $school_sel.append("<option>Choose region</option>");
                            var schools_obj = JSON.parse(result);
                            $.each(schools_obj, function(key, val) {
                                var option = '<option  value="' + val.school_id + '" >' + val.school_name + '</option>';
                                $school_sel.append(option);
                            });
                        });
                    });
                });

echo "<tr><td><label>  Choose role:* </label> </td><td>";
  $selected_role = $this->input->post('role_id'); ?>
  <input type="radio" name="role_id" id="radio1" onclick="showHide(this, true)" value="1" 
  <?php echo '1' ==  $selected_role ? 'checked="checked"' : 
      '' ?>/>
      <?php  echo " Ученик "; ?>
      <input type="radio" name="role_id" id="radio2" onclick="showHide(this, true)" value="2" 
  <?php echo '2' ==  $selected_role ? 'checked="checked"' : 
      '' ?>/>
       
      <input type="radio" name="role_id" id="radio5" onclick="teachers_show(this, true)" value="5" 
  <?php echo '5' ==  $selected_role ? 'checked="checked"' : 
      '' ?>/>
  
  
  echo "</td></tr>";
  echo "<tr class='toggle' style='display:none;' ><td><label>  Region*  </label></td><td>";
 
 $selected_region = $this->input->post('region');  ?>
  <select name='region' id='region' onClick='show(this, true)'>
      <?php foreach ($regions as $row) { ?>
        <option name='region' value="<?= $row->region ?>" 
        <?php  echo $row->region ==  $selected_region ? 'selected="selected"' : ''
        ?>>
        <?= $row->region ?></option>
      <?php   } ?>
  </select> 

  
 <?php

  echo "</td></tr>";

  echo "<tr class='school' style='display:none;' ><td><label> School:*  
  </label></td><td>";  
    $selected_school = $this->input->post('school[]');  ?>
<select id="school" name="school[]" class='school' onChange='school_show(this, true)'>
 <option value="" <?php  echo "" ==  $selected_school ? 'selected="selected"' : ''
        ?>>Choose region</option>
  </select>

  
  <?php echo "</td></tr>";

$(document).ready(function(){
$(function(){
    $(document).on('change', '.school', function(e) {
          alert(this.options[e.target.selectedIndex].text);
    
      $( "#school" ).this.options[e.target.selectedIndex].text;
     
});
  $('.school').show();      
});
});

Answer 1

要重新填充表单字段，您可以使用表单库功能。 https://ellislab.com/codeigniter/user-guide/libraries/form_validation.html#repopulatingform

<?php echo validation_errors(); ?>
<?php echo form_open('form'); ?>
 <h5>Username</h5>
 <input type="text" name="username" value="<?php echo set_value('username'); ?>" />
 <input type="submit" value="Submit" />
</form>

set_value() 将以这种形式重新填充用户在字段中输入的值(在本例中为名为“用户名”的字段)

至于检索自动生成的下拉列表，我会尝试使用 $_POST['region'] 值再次重现相同的下拉列表。

例如在伪代码中

if ($_POST array exists) {      
   if ($_POST['region'] has a value) {
     // eg. a region has been previously selected
     retrieve this dropdown using the region parameter 
   }
}