Show Hide Div based on selected item from bootstrap multi selectpicker DropDown in jQuery

taruni

SOLVED CLOSED ACTIVE ANSWERED
User: taruni
Posted: on May 18, 2021 12:28 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 16112
Sample Code: Download

how to display selected item records using multi select dropdown using html and jquery

i need to show div data based on dropdown selection pls help

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    
  <!-- Multiple Item Picker -->
  <div class="jumbotron">
    <h2>Multiple Item Picker</h2>
    <select class="selectpicker show-menu-arrow" 
            data-style="form-control" 
            data-live-search="true" 
            title="-- Select your box--"
            multiple="multiple">
      <option data-tokens="all">all</option>
      <option data-tokens="box1">box1</option>
      <option data-tokens="box2">box2</option>
      <option data-tokens="box3">box3</option>
     
    </select>
  </div><!--.jumbotron-->

  </div><!--.row-->
  
  <div class="row">
      <div class="box1">
	       <h3>You have selected box 1</h3>
       </div>
	   
	   <div class="box2">
	       <h3>You have selected box 2</h3>
       </div>
	   
	   <div class="box3">
	     <h3>You have selected box 3</h3>
       </div>
  </div>
  
</div><!--.container-->

<script>
  /* Multiple Item Picker */
  $('.selectpicker').selectpicker({
    style: 'btn-default'
  });
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/js/bootstrap-select.min.js"></script>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on May 18, 2021 01:10 AM
Report

Hi taruni,

Refer below code.

HTML

<html>
<head>
    <title></title>
</head>
<body>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/js/bootstrap-select.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.selectpicker').selectpicker({
                style: 'btn-default'
            });

            $('.selectpicker').on('change', function () {
                $('.box1').hide();
                $('.box2').hide();
                $('.box3').hide();
                $.each($(this).find('option:selected'), function (index, item) {
                    var selected = $(item).data('tokens');
                    if (selected == 'all') {
                        $('.box1').show();
                        $('.box2').show();
                        $('.box3').show();
                        return true;
                    } else {
                        $("." + selected).show();
                    }
                });
            });
        });
    </script>
    <div class="container">
        <div class="row">
            <!-- Multiple Item Picker -->
            <div class="jumbotron">
                <h2>Multiple Item Picker</h2>
                <select class="selectpicker show-menu-arrow" data-style="form-control"
                    data-live-search="true" title="-- Select your box--" multiple="multiple">
                    <option data-tokens="all">all</option>
                    <option data-tokens="box1">box1</option>
                    <option data-tokens="box2">box2</option>
                    <option data-tokens="box3">box3</option>
                </select>
            </div>
            <!--.jumbotron-->
        </div>
        <!--.row-->
        <div class="row">
            <div class="box1">
                <h3>You have selected box 1</h3>
            </div>
            <div class="box2">
                <h3>You have selected box 2</h3>
            </div>
            <div class="box3">
                <h3>You have selected box 3</h3>
            </div>
        </div>
    </div>
    <!--.container-->
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Show Hide Div based on selected item from bootstrap multi selectpicker DropDown in jQuery

Company

Explore

Follow us

Contact Us