CODEWITHSUNDEEP
javascriptjqueryhtml
Ibadullah Khan
Ibadullah Khan

Reputation: 103

Onchange jQuery Event for Dropdown

I have a dropdown with 3 selectors. I wanted to show the content of each of the selector onchange. Can someone help?

Codeply: https://www.codeply.com/go/M5JCiCq2qo

function myFunction() {
  var x = document.getElementById("filter-extras").value;
  document.getElementById("extra-filter").innerHTML = "You selected: " +
    x;
}
<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" onchange="myFunction()" id="filter-extras">
  <option selected="selected" value="fuel">Fuel replacement</option>
  <option value="wifi">Portable WiFi hotspot</option>
  <option value="cleaning">Post-trip cleaning</option>
</select>

<div>Content for Fuel replacement</div>
<div>Content for Portable WiFi hotspot</div>
<div>Content for Post-trip cleaning</div>

I think with jQuery it would be easier to do.

Upvotes: 0

Views: 2727

Answers (3)

Akhilesh
Akhilesh

Reputation: 968

I think you already got your answer but if you want to show selected content by default on load then you should add this line to you code

// so in order to show the content of "Fuel replacement" as it is selected

$( function({
    const contentToShow = $('#filter-extras').val();
    $('#' + contentToShow).show();

   // after this you can add the code here
      $('#filter-extras').change(()=>{
        // show hide content here
      });
});

Upvotes: 0

Smollet777
Smollet777

Reputation: 1646

I tried to make two versions with identical behavior and default content displayed. Here we simply check in forEach loop if id is equal to selected value: 

document.getElementById('filter-extras').addEventListener('change', myFunction)

function myFunction() {
  var x = document.getElementById('filter-extras').value;
  document.querySelectorAll('.content').forEach(function(element) {
    if (element.getAttribute('id') === x) {
      element.style = 'display:block'
    } else {
      element.style = 'display:none'
    }
  });
}

myFunction()
<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
  <option selected="selected" value="fuel">Fuel replacement</option>
  <option value="wifi">Portable WiFi hotspot</option>
  <option value="cleaning">Post-trip cleaning</option>
</select>

<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>

$("#filter-extras").on("change", myFunction)

function myFunction() {
  var x = $("#filter-extras").val();
  $('.content').each(function() {
    if ($(this).attr('id') === x) {
      $(this).show()
    } else {
      $(this).hide()
    }
  })
}

myFunction()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
  <option selected="selected" value="fuel">Fuel replacement</option>
  <option value="wifi">Portable WiFi hotspot</option>
  <option value="cleaning">Post-trip cleaning</option>
</select>

<div id="fuel" class="content">Content for Fuel replacement</div>
<div id="wifi" class="content">Content for Portable WiFi hotspot</div>
<div id="cleaning" class="content">Content for Post-trip cleaning</div>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337714

This can still be done quite easily with plain JS. You just need to add the change event handler to the select, then you can use the value chosen to select the content to show and hide all the others, something like this:

var content = document.querySelectorAll('.content');

document.querySelector('#filter-extras').addEventListener('change', function() {
  content.forEach(function(el) { el.style.display = 'none'; });
  document.querySelector('#' + this.value).style.display = 'block';
});
.content { 
  display: none;
}
<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
  <option selected="selected" value="fuel">Fuel replacement</option>
  <option value="wifi">Portable WiFi hotspot</option>
  <option value="cleaning">Post-trip cleaning</option>
</select>

<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>

If you did want to do it in jQuery, here is the same logic translated:

var $content = $('.content');

$('#filter-extras').on('change', function() {
  $content.hide();
  $('#' + this.value).show();
});
.content { 
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
  <option selected="selected" value="fuel">Fuel replacement</option>
  <option value="wifi">Portable WiFi hotspot</option>
  <option value="cleaning">Post-trip cleaning</option>
</select>

<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>

Upvotes: 2

Related Questions