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

Posted 2023-05-07

【中文标题】如何设置动态下拉列表的选定值

【英文标题】：How to set selected values of dynamic dropdowns

【发布时间】：2015-07-06 23:23:32

【问题描述】：

首先，我有 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();      
);
);

【问题讨论】：

能否在 sn-p 部分运行 html 生成的代码（目前显示的是 codeigniter 代码）

我稍微更改了我的代码，我将编辑我的问题以显示它。现在，当单击电台并单击区域并提交表单时，仍然选择此电台和地区。但是在那之后如何为依赖下拉菜单做到这一点？

我对这个问题有点困惑 - 您是否尝试在发生错误时“重置”选择。例如，如果用户选择了一个单选框，但忘记从动态下拉列表中进行选择，然后返回页面以取消选择单选框和下拉列表？

我希望当用户按下提交按钮并且没有填写所有必填字段时，他被选中的这些字段和下拉列表仍然被选中并且必须填写这些空白，不要选择再次选择他已经选择的内容。

【参考方案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 
   

【讨论】：

我已经为用户名做了这个。我的问题是下拉菜单。请参阅此代码： $(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() ; // 看问题。从这里开始，我认为区域是动态的，所以我不知道该怎么做。

好的 - 因为下拉列表是动态的，所以有一些功能可以将区域参数从 $_POST 数组传递到 /get_schools 函数，因此它知道应该将哪个“区域”拉入下拉列表菜单。

$(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(); ) ; );这向我显示了所选选项的警报，但如何将其设置为学校选项

好的——你能得到选中选项的值吗？如果是这样试试这个.. $('#school').val(yourvalue);

是的，但是（myvalue）应该是什么 - 如何在#school 中设置选定的值