jQuery selectmenu and display content of selected menu

Question

How do I add contents to be called every time a different item is selected using jquery selectmenu? I've written the below code so far and want to add that call.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Selectmenu - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <style>
        fieldset {
          border: 0;
        }
        label {
          display: block;
          margin: 30px 0 0 0;
        }
        .overflow {
          height: 200px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $( function() {
            $( "#category" ).selectmenu();
        } );
    </script>
</head>
<body>
    <div class="demo">
        <form action="#">
            <fieldset>
            <label for="preference">Pick a category</label>
            <select name="category" id="category">
                  <option>Business</option>
                  <option>School</option>
                  <option Sport="selected">Medium</option>
            </select>
        </form>
        <div>
            content of select category.
        </div>
    </div>
</body>
</html>

I want a dynamic content for each of the options provided. If someone picks Business, information about business should be displayed and also for the rest.

Answer 1

Here is solution :

 $( function() { $('#Business').hide(); $('#School').hide(); $('#Medium').hide(); $( "#category" ).selectmenu(); $('#category').change(function(){ var value=$(this).val(); $('.information').empty().append(($('#'+value).html())); }); } );

 fieldset { border: 0; } label { display: block; margin: 30px 0 0 0; } .overflow { height: 200px; } select{ width:300px; } .information{ background-color:yellow; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <link href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.core.css" rel="stylesheet"/> <link href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.theme.css" rel="stylesheet"/> <link href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.selectmenu.css" rel="stylesheet"/> <script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.core.js"></script> <script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.widget.js"></script> <script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.position.js"></script> <script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.selectmenu.js"></script> <div class="demo"> <form action="#"> <fieldset> <label for="preference">Pick a category</label> <select name="category" id="category"> <option value="" disabled selected>Select your option</option> <option>Business</option> <option>School</option> <option>Medium</option> </select> </fieldset> </form> <br> <div class="information"> </div> <div id="Business"> Content of bussinesss<br> </div> <div id="School"> Content of school<br> </div> <div id="Medium"> Content of medium<br> </div> </div>

Or in jsFiddle

jQuery selectmenu and display content of selected menu

Question

1 answers

solution1
1 2016-11-15 08:22:00

jQuery selectmenu and display content of selected menu

Question

1 answers

solution1 1 2016-11-15 08:22:00

solution1
1 2016-11-15 08:22:00