display data related to a dropdown option

Question

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?

Possible duplicate of [jQuery Get Selected Option From Dropdown](http://stackoverflow.com/questions/10659097/jquery-get-selected-option-from-dropdown) — Manoz, Mar 28 '16 at 12:51

Gokul Shinde · Accepted Answer · 2016-03-28T12:50:56.623

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.

score 0 · Answer 2 · answered Mar 28 '16 at 12:49

0

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
  };
});

answered Mar 28 '16 at 12:49

Gaurav Aggarwal

9,809
6
36
74

hey i have a div and some content for every value. how to show the content of the div only when the value matches – Pallavi Hegde Mar 28 '16 at 15:31
wrap different content in different inner div's with different classes and show the classes accordingly in above code...if you can create a fiddle and share your code i can code for u :) – Gaurav Aggarwal Mar 29 '16 at 04:47
hey i did something similar and the code worked now , i basically did a hide on the siblings and display on the div vased on the value selected . I did create a fiidle but no idea why it isnt working der.. https://jsfiddle.net/r80r8jrc/ Here is my fiddle. – Pallavi Hegde Mar 29 '16 at 05:57
But how do i tackle it if i am fetching the data from db , the i would just be creating one generalized div and generate dynamic data. How would the id's work then? – Pallavi Hegde Mar 29 '16 at 06:01
i cant see the included jquery liberary here...have u included it in your code?? – Gaurav Aggarwal Mar 29 '16 at 06:01
bro u were doing some code mistaked...here is the updated fiddle u were missed with one bracket https://jsfiddle.net/yudi/r80r8jrc/2/ – Gaurav Aggarwal Mar 29 '16 at 06:06

score 0 · Answer 3 · answered Mar 28 '16 at 12:50

0

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
});

answered Mar 28 '16 at 12:50

Konstantin Dinev

34,219
14
75
100

score 0 · Answer 4 · edited Mar 28 '16 at 13:31

0

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)
});

edited Mar 28 '16 at 13:31

krisk

6,957
1
18
30

answered Mar 28 '16 at 12:51

amrit sandhu

128
4

display data related to a dropdown option

4 Answers4