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

Expand|Select|Wrap|Line Numbers

  <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

Expand|Select|Wrap|Line Numbers

 <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

Expand|Select|Wrap|Line Numbers

 $("#itemType_id").change(function() {
 
            $.ajax({

                url : "feature/tea/",

                method: "post",

                data: "id=" + $(this).val(),

                dataType:"json",

                success: function(response) {

                   window.location.reload();
 
                    // handle

                }

            })  

        });

Mar 31 '14 #1

Subscribe Post Reply

5140

Sherin

64KB

Expand|Select|Wrap|Line Numbers

 <!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>

Aug 11 '20 #2

Similar topics

Dropdownlist selected value

by: Kannan.M.R | last post by:

Hi, I have a problem in assigning the selected value in the dropdown to a hidden control. It goes like this. I have a repeater control. In the repeater controlâ€™s item template, I have a...

C# / C Sharp

asp.net dropdown selected value

by: tmeister | last post by:

I must be missing something obvious. I have a drop down list in asp.net and it populates the states from a database. When I view the source of the page I get the standard option tags with the...

ASP.NET

dropdown selected value

by: siaj | last post by:

Hi..Me New to ASP.NET I am trying to get the selected value from the dropdownlist but I m always getting the first selected value ...I am giving the code down ... <asp:dropdownlist...

ASP.NET

Problem in maintaining the selected value of dropdown list

by: itgaurav198 | last post by:

Hi, i have one jsp in which i select a value from drop down and on change of this a servlet is called that accesses some values and return to the same jsp where these values get populated in...

Java

show textbox when dropdown value changed

by: gopim | last post by:

i write the code like this function show() { var subject=document.getElementById('<%=ddlsubject.ClientID %>'); var txtsubject=document.getElementById('<%=TextBox1.ClientID%>');...

Javascript

show image when a field value = 1

by: canajien | last post by:

I am trying to get a script to show a particular image when a field value = 1, otherwise it will show something else, and this is what I came up with: $i=0; while ($i < $num) { ...

PHP

Dropdown Menu- Choose 'Other' selection to show hidden textbox

by: jerrydigital | last post by:

good evening, I am trying to allow my users to enter in text if they don't find their option on my drop down menu. In the code below, I can get a text box to show up when I select 'Other' on the...

Javascript

how to enable or disable div on dropdown selected index change and light box

by: khushi patel | last post by:

I am working on Lightbox that has dropdown on it. depending on ddl value div should be shown up pleae help <%@ Page Title="" Language="VB" MasterPageFile="~/MasterSite.master"...

.NET Framework

one dropdown selected value is affected by another dropdownlist

by: kunal choudhary | last post by:

hi, I have created a form (in ASP.NET and C#) which have 5 dropdown 1.3rd dropdown fill on the basis of 1st n 2nd dropdown value 2.5th dropdown fill on the basis of 4th dropdown value I...

C# / C Sharp

Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

General

One-click Importing Excel Data into a*Database

by: ryjfgjl | last post by:

In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...

Microsoft Excel

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General