CODEWITHSUNDEEP
javascriptjquery
Pallavi Hegde
Pallavi Hegde

Reputation: 219

display data related to a dropdown option

I have a drop down list 

<select name="column_select" id="column_select">
<option value="col1">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>

On clicking an option i want to display the details of the particular option in the same page.

How can this be implemented using jquery?

Upvotes: 0

Views: 118

Answers (4)

amrit sandhu
amrit sandhu

Reputation: 130

try this...

$(document).on('change','#column_select',function() {
   // Code to write it anywhere on page. 
   // If you want it to write on `span#spnDisplay` then use this
   var selText = $('#column_select option:selected').text();
   $('#spnDisplay').text(selText)
});

Upvotes: 0

Gokul Shinde
Gokul Shinde

Reputation: 965

function showval(value) 
{
  
  var text = $("#column_select option:selected").text();
  
  var string = "Value is: "+value+" and Text is: "+text;
  
  $("#showvalue").html(string);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showvalue">
</div>


<select name="column_select" id="column_select" onchange="showval(this.value);">
<option value="col1">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>

It should help you.

Upvotes: 1

Konstantin Dinev
Konstantin Dinev

Reputation: 34895

You can subscribe to the change event for the select and perform the details display based on the current value in the select:

$("#column_select").on("change", function () {
    var value = $(this).val();
    // logic based on selected value
});

Upvotes: 0

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10177

use this jquery

jquery

$('select.column_select').on('change', function(){
  var selectVal = $(this).val();
  if(selectVal==col1){
    // do something
  };
  if(selectVal==col2){
    // do something
  };
  if(selectVal==col3){
    // do something
  };
});

Upvotes: 0

Related Questions