Call jquery function from dropdown list

Question

I have the following drop down list:

<select name="DDLConditional1" size="1"> <option selected="selected">is equal to</option> <option>begins with</option> <option onclick="ShowBetween();">is between</option> <option>is not equal to</option> <option>is greater than</option> <option>is less than</option> </select> 

I want to show () a text box and a label based on the one who selected the “between” option in the drop-down list. I have a multiplicity of these dropdowns, and all of them will have to do the same. In other words, I have DDLConditional1 2 3 4 ... infinite. I already managed to make a button that adds new conventions.

Answer 1

I would get rid of the inline handler assignment and use jQuery to control the handler.

It appears that the <select> elements are dynamically added to the DOM, which is why the jQuery .live() method is used here to process these dynamic elements.

Example: http://jsfiddle.net/GPMmJ/

 $(function() { $('select[name^=DDLConditional]').live('change', function() { if( $(this).val() === 'is between') { alert('is between was selected'); } }); }); 

At any time when a <select> , which has a name that begins with DDLConditional , is added to the page, the change handler will work automatically. It gets the value of what was selected using the jQuery .val() method , and checks if it is in between .

Answer 2

Why not use jQuery throughout the onChange event instead of onClick :

 jQuery(document).ready(function() { jQuery("select[name^=DDLConditional]").live("change", function() { if(jQuery("option:selected", this).text() === "is between") { //display the textbox and label } }); }); 

This code runs after the page loads. It searches for all select elements whose names begin with DDLConditional . Then it uses live (so even future elements that can be added dynamically are taken into account) to bind the handler to the change event.

Answer 3

Of course, just wrap the <select> in a div, and you can easily add a text box using jQuery. Sort of:

 <div class="conditional> <select name="DDLConditional1" size="1"> ... </select> </div> <script type="text/javascript"> $(document).ready(function() { // store our select as a jQuery object var $select = $(".conditional select"); $select.change(function() { // get our parent (the div) var $wrapper = $(this).closest(".conditional"); // if the selected option text is "in between" if($("option:selected", this).text() == "is between") { // append a textbox var $newTextbox = $("<input type='text' />"); $newTextbox.css('color', 'red'); //perhaps set some CSS properties? $wrapper.append($newTextbox); } }); }); </script> 

Here's an example that works in IE 7/8, Firefox, Chrome, and Safari.

Answer 4

You don't want onclick - you want to use onchange for <select> , where you check its current value to see if you want it.