想要在表单提交后显示多个选择列表的所选选项的div

时间:2017-06-02 13:38:36

标签: php jquery

这是我的看法 在id="mystuff"的第一个选择列表中,我将选择一个选项而不是相关的div (与选项和类名的值相关。与value="opt1"class="mystaff_opt1"一样,我比较"opt1") 将使用java脚本显示。

我想要的是显示div也必须在表单提交后(提交后我的页面指向同一页面)。

  <div  class="container margin_120">
<div class="row">
<div class="col-lg-9 col-md-9">
        <div id="tools">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <h4 class="inner margin_5_tb"><i class="icon_set_1_icon-30"></i>Student Scholarship Requests</h4>
                </div>              
            </div>
        </div><!--/tools -->        
        <?php 
        if (isset($msg)) { echo $msg."<br/>"; }
        if ($this->session->flashdata('msg')) { echo $this->session->flashdata('msg')."<br/>"; }
        ?>
        <div class="strip_all_tour_list wow fadeIn padding_15 col-md-12 col-sm-12 col-xs-12" data-wow-delay="0.1s">
            <?php $attributes = array("name" => "loanSchPgmStudentAplsForm","id" => "loanSchPgmStudentAplsForm");
            echo form_open("trusts/loanSchPgmStudentApls", $attributes); ?>
            <div class="row">
                <div class="col-md-6 col-sm-6 pull-left">
                    <div class="form-group">                            
                        <legend>Options to Search</legend>
                        <select class="form-control firstdropdown" name="sel_options" id="mystuff">
                            <option>Select Options</option>
                            <option value="opt1">Scholership Programs</option>
                            <option value="opt2">Family Income</option>
                            <option value="opt3">Religion</option>
                            <option value="opt4">Category</option>
                            <option value="opt5">Gender</option>
                            <option value="opt6">State</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-sm-6 mystaff_hide mystaff_opt1">
                <div class="form-group">                            
                    <label for="LS_name">Scholarship</label>
                    <?php 
                    $LSList = [];
                    if(isset($_REQUEST['LS_name'])){
                        $LSList = $_REQUEST['LS_name'];
                    }
                    ?>
                     <select  class="form-control" name="LS_name[]" id="LS_name" multiple="multiple">
                        <?php foreach($LS_List as $key => $value){ ?>
                            <option value="<?php echo $value['name']; ?>" <?php if(in_array($value['name'], $LSList)){ ?>selected="selected"<?php } ?>><?php echo $value['name']; ?></option><?php
                        } ?>
                     </select>
                </div>      
            </div>  
            <div class="col-md-6 col-sm-6 mystaff_hide mystaff_opt2">
                <div class="form-group">                            
                    <label for="Family Income">Family Income</label>
                    <?php 
                    $fiList = [];
                    if(isset($_REQUEST['FamilyIncome'])){
                        $fiList = $_REQUEST['FamilyIncome'];
                    }
                    ?>
                    <select multiple class="form-control" name="FamilyIncome[]" id="FamilyIncome">
                        <option value="1" <?php if(in_array('1', $fiList)){ ?>selected="selected"<?php } ?>>< 40,000 P.A</option>
                        <option value="2" <?php if(in_array('2', $fiList)){ ?>selected="selected"<?php } ?>>40,000< X < 1,00,000 P.A</option>
                        <option value="3" <?php if(in_array('3', $fiList)){ ?>selected="selected"<?php } ?>>1,00,000< X < 2,50,000 P.A</option>
                        <option value="4" <?php if(in_array('4', $fiList)){ ?>selected="selected"<?php } ?>>2,50,000< X < 6,00,000 P.A</option>
                        <option value="5" <?php if(in_array('5', $fiList)){ ?>selected="selected"<?php } ?>>>6,00,000 P.A</option>
                    </select>
                </div>              
            </div>  
            <div class="col-md-6 col-sm-6 mystaff_hide mystaff_opt3">
                <div class="form-group">    
                    <label for="Religion">Religion</label>
                    <?php 
                    $relList = [];
                    if(isset($_REQUEST['Religion'])){
                        $relList = $_REQUEST['Religion'];
                    }
                    ?>
                    <select class="form-control" name="Religion[]" id="Religion" multiple>
                        <option value="Hindu" <?php if(in_array("Hindu", $relList)){ echo "selected"; } ?>>Hindu</option>
                        <option value="Budhism" <?php if(in_array("Budhism", $relList)){ echo "selected"; } ?>>Budhism</option>
                        <option value="Christian" <?php if(in_array("Christian", $relList)){ echo "selected"; } ?>>Christian</option>
                        <option value="Jain" <?php if(in_array("Jain", $relList)){ echo "selected"; } ?>>Jain</option>
                        <option value="Muslim" <?php if(in_array("Muslim", $relList)){ echo "selected"; } ?>>Muslim</option>
                        <option value="Parsi" <?php if(in_array("Parsi", $relList)){ echo "selected"; } ?>>Parsi</option>
                        <option value="Sikh" <?php if(in_array("Sikh", $relList)){ echo "selected"; } ?>>Sikh</option>
                        <option value="Others" <?php if(in_array("Others", $relList)){ echo "selected"; } ?>>Others</option>
                    </select>
                </div>              
            </div>
            <div class="col-md-6 col-sm-6 mystaff_hide mystaff_opt4">
                <div class="form-group">                            
                    <label for="Category">Category</label>
                    <?php 
                    $catList = [];
                    if(isset($_REQUEST['Category'])){
                        $catList = $_REQUEST['Category'];
                    }
                    ?>
                    <select multiple class="form-control" name="Category[]" id="Category">
                        <option value="General" <?php if(in_array("General", $catList)){ echo "selected"; } ?>>General</option>
                        <option value="OBC" <?php if(in_array("OBC", $catList)){ echo "selected"; } ?>>OBC</option>
                        <option value="SC" <?php if(in_array("SC", $catList)){ echo "selected"; } ?>>SC</option>
                        <option value="ST" <?php if(in_array("ST", $catList)){ echo "selected"; } ?>>ST</option>
                        <option value="Others" <?php if(in_array("Others", $catList)){ echo "selected"; } ?>>Others</option>
                    </select>
                </div>              
            </div>
            <div class="col-md-6 col-sm-6 mystaff_hide mystaff_opt5">
                <div class="form-group">                            
                    <label for="Gender">Gender</label>  
                    <?php 
                    $gList = [];
                    if(isset($_REQUEST['Gender'])){
                        $gList = $_REQUEST['Gender'];
                    }
                    ?>
                     <select multiple class="form-control" name="Gender[]" id="Gender">
                          <option value="male" <?php if(in_array('male', $gList)){ ?>selected="selected"<?php } ?>>Male</option>
                          <option value="female" <?php if(in_array('female', $gList)){ ?>selected="selected"<?php } ?>>Female</option>
                     </select>
                </div>              
            </div>
            <div class="col-md-6 col-sm-6 mystaff_hide mystaff_opt6">
                <div class="form-group">                            
                    <label for="State">State</label>
                    <?php 
                    $sList = [];
                    if(isset($_REQUEST['State'])){
                        $sList = $_REQUEST['State'];
                    }
                    ?>

                     <select multiple class="form-control" name="State[]" id="State">
                        <?php foreach($stateList as $key => $value){ ?>
                            <option value="<?php echo $value['statename']; ?>" <?php if(in_array($value['statename'], $sList)){ ?>selected="selected"<?php } ?> stateId="<?php echo $value['id']; ?>"><?php echo $value['statename']; ?></option><?php
                        } ?>
                     </select>
                </div>      
            </div>
            <div class="col-md-6 col-sm-6 mystaff_hide mystaff_opt6">
                <div class="form-group">                            
                    <label for="District">District</label>
                    <?php 
                    $dList = [];
                    if(isset($_REQUEST['District'])){
                        $dList = $_REQUEST['District'];
                    }
                    ?>
                     <select multiple class="form-control" name="District[]" id="District">
                        <?php foreach($districtList as $key => $value){ ?>
                            <option value="<?php echo set_value('District') ? set_value('District') :@$districtList->District; ?>" <?php if(in_array($value['city'], $dList)){ ?>selected="selected"<?php } ?>></option><?php
                        } ?>
                     </select>
                </div>      
            </div>
            <div class="col-md-12 col-sm-12 pull-right" style="margin:15px 0; ">
                <button  type="submit" class="btn btn-md btn-success">submit</button>
            </div>
            <?php echo form_close(); ?>
            </div><!-- End col lg-9 -->
      </div><!-- End row -->
 </div><!-- End container -->
        <script src="<?php echo base_url(); ?>assets/js/jquery-
    1.11.2.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/js/jquery.multi-select.min.js"></script>

          <script>
    $('.mystaff_hide').addClass('collapse');

        //on change hide all divs linked to select and show only linked to selected option
        $('#mystuff').change(function(){
            var selector = '.mystaff_' + $(this).val(); //Saves in a variable the wanted div
            $(selector).collapse('show'); //show only element connected to selected option
        });

        var locState = '<?php echo @$stateList->State; ?>';
        var locDistrict = '<?php echo @$districtList->District; ?>';
        changeCityList('#District',locState,locDistrict);

    });
    $(document).on('change', '#State', function() {
        var locDistrict = '<?php echo @$districtList->District; ?>';
        var cstate = [];
        $.each($("#State option:selected"), function(){            
            cstate.push($(this).val());
        });
        changeCityList('#District',cstate,locDistrict);
    });

    function changeCityList(selId,cstate,locDistrict){
        var options = "";
        $.ajax({
           url: '<?php echo site_url("trusts/getCityLists"); ?>',
           type: 'GET',
           data: {
                    cstate:cstate
                }, 
           dataType: 'json',

           success: function(data) {
            $(selId).empty();
            $.each(data, function(key, value){
            if(value.city==locDistrict){
                    $(selId).append($("<option></option>").attr("value", value.city).text(value.city).attr("selected", 'true'));
                }
                else{
                    $(selId).append($("<option></option>").attr("value", value.city).text(value.city));
                }
            });
           }
        });
    }
    <?php if((isset($_POST['LS_name'])) && !empty(isset($_POST['LS_name']))){ ?>
        $('.mystaff_opt1').collapse('show');
    <?php } ?>  
    <?php if((isset($_POST['FamilyIncome'])) && !empty(isset($_POST['FamilyIncome']))){ ?>
        $('.mystaff_opt2').collapse('show');
    <?php } ?>  
    <?php if((isset($_POST['Religion'])) && !empty(isset($_POST['Religion']))){ ?>
        $('.mystaff_opt3').collapse('show');
    <?php } ?>  
    <?php if((isset($_POST['Category'])) && !empty(isset($_POST['Category']))){ ?>
        $('.mystaff_opt4').collapse('show');
    <?php } ?>  
    <?php if((isset($_POST['Gender'])) && !empty(isset($_POST['Gender']))){ ?>
        $('.mystaff_opt5').collapse('show');
    <?php } ?>  
    <?php if((isset($_POST['State'])) && !empty(isset($_POST['Gender']))){ ?>
        $('.mystaff_opt6').collapse('show');
    <?php } ?>  
    </script>

1 个答案:

答案 0 :(得分:1)

假设您的表单操作是同一页面,而您的表单操作是POST。 这应该可以解决问题,将此代码写在页面底部。

<?php if(isset($_POST['sel_options']) && !empty($_POST['sel_options'])): ?>
<script>
var selected_option = "<?php echo $_POST['sel_options']; ?>";
var selector = '.mystaff_' + selected_option;
    //show only element connected to selected option
    $(selector).collapse('show');
</script>
<?php endif; ?>

另一种方式,你也可以使用触发事件。

var selectedFormkey = jQuery('#mystuff').val();
            if(selectedFormkey.length > 0){ 
                $('#mystuff').trigger('change');
            }

<强>更新

试试这个,希望这会对你有所帮助

<?php if(isset($_POST['sel_options']) && !empty($_POST['sel_options'])){ ?>
        var selectedOption = "<?php echo $_POST['sel_options']; ?>";
        var selector = '.mystaff_' + selectedOption; 
        $(selector).collapse('show');
    <?php } ?>  
    <?php if(isset($_POST['LS_name']) && !empty($_POST['LS_name'])){ ?>
        $('.mystaff_opt1').collapse('show');
    <?php } ?>  
    <?php if(isset($_POST['FamilyIncome']) && !empty($_POST['FamilyIncome'])){ ?>  
        $('.mystaff_opt2').collapse('show');
    <?php } ?>  
    <?php if(isset($_POST['Religion']) && !empty($_POST['Religion'])){ ?>  
        $('.mystaff_opt3').collapse('show');
    <?php } ?>  
    <?php if(isset($_POST['Category']) && !empty($_POST['Category'])){ ?>  
        $('.mystaff_opt4').collapse('show');
    <?php } ?>  
    <?php if(isset($_POST['Gender']) && !empty($_POST['Gender'])){ ?>  
        $('.mystaff_opt5').collapse('show');
    <?php } ?>  
    <?php if(isset($_POST['State']) && !empty($_POST['State'])){ ?> 
        $('.mystaff_opt6').collapse('show');
    <?php } ?>