Question

So I’m using django and I have a page/template that looks like (simplified to only the relevant parts)

<select id="printerSelect" name="printer_id">
<option>Select Printer</option>                             
<option>printer1</option>                           
<option>printer2</option>                           
</select>

and later on I have something like

<div id="printerInfo">
No printer Selected
</div>

So the printerSelect list is populated by querying a mongodb database, finding the printer names and dynamically putting them in the list on a page load through django templates/context stuff. Is it possible to know when a user selects an option in that list and have it change the contents of the printerInfo div?

I know jquery as well if that helps. I think the main questions are:

1. How to tell when a user changes a selection in the list (probably can be done with a binded jquery listener for it?)
2. How to query the database for additional information based on that selected option

Edit

So I actually came up with a hacky way of doing this using what Sushanth suggested. Basically in the django template you create a bunch of divs that hold the additional information that is being requested from the database and that will eventually go into printerInfo.

Then using jquery you have a function that saves that information into variables, using “printer1”, “printer2” as map keys to that information. Then you remove these divs. Because this is all done right when the page is loaded the user never sees any of this.

Then whenever an item is selected, you use the selection text as a key to the map containing the value/text that’s going in the printerInfo div. Then it’s just a simple matter of changing its text field to whatever

Answer 1

You can use the .change() event to get the first requirement

$('#printerSelect').on('change' , function() {
     // Code here
     var $this = $(this);
    var text = "No Printer Selected";
    if($this.find('option:selected').index() !== 0){
        text = $this.find('option:selected').text() + ' Selected';
    }     
    $('#printerInfo').html(text);
}).change();​​​​

Check Demo

If you want to get the Data from the server , then send in an AJAX request for a paricular option.