how to show and hidden when dropdown selected value change?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • nu123
    New Member
    • Mar 2014
    • 1
    #1

    how to show and hidden when dropdown selected value change?

    I'm using codeigniter to create my php web site in my view page I need to set visible when the drop-down value change how can i do that?
    this the button that i need visible and hidden when drop-down change

    dropdown
    Code:
     <div class="form-group">
         <label for="lastname" class="control-label">Your Packages</label>
           <?php if(isset($tourbuddy_packages)){?>
              <select id="itemType_id" class="form-control input-sm" name="tripbuddy_PackageTitle" >
           <?php
                foreach ($tourbuddy_packages as $packages) {?>
                   <option value="<?php echo $packages['PackageID'] ?> "><?php echo $packages['PackageTitle']?></option>
            <?php } ?>
            </select>
            <input type="hidden" name="PackageID" id="country_hidden">
             <?php }  else { ?>
                <select class="form-control input-sm" name="tripbuddy_PackageTitle">
                    <option>Add Packages</option>
                  </select>
              <?php } ?>
</div>
    button
    Code:
    <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#yourpackages" >View/Edit</button>
    other than this i used some javascrip to send ajax request to my controller
    Code:
    $("#itemType_id").change(function() {
            
             
            $.ajax({
                url : "feature/tea/",
                method: "post",
                data: "id=" + $(this).val(),
                dataType:"json",
                success: function(response) {
                   window.location.reload();
                    
                    // handle
                }
            })  
        });
    Tags: None
    • Sherin
      New Member
      • Jan 2020
      • 77
      #2
      Code:
      <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Elements Using Select Box</title>
<style>
    .box{
        color: #fff;
        padding: 20px;
        display: none;
        margin-top: 20px;
    }
    .red{ background: #ff0000; }
    .green{ background: #228B22; }
    .blue{ background: #0000ff; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".box").hide();
            }
        });
    }).change();
});
</script>
</head>
<body>
    <div>
        <select>
            <option>Choose Color</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>
    </div>
    <div class="red box">You have selected <strong>red option</strong> so i am here</div>
    <div class="green box">You have selected <strong>green option</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue option</strong> so i am here</div>
</body>
</html>

        Comment

        Previous template Next
        Working...