calling jquery function from a dropdown list

Question

I have the following dropdown list box:

      <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 textbox and a label based on someone selecting the "is between" option of the dropdown list. I have multiples of these dropdowns and all of them will have to do the same thing. In other words I have DDLConditional1 2 3 4... infinite. I've already been able to make the button work that appends new conditionals.

Answer 1

You don't want onclick - you want to use the onchange of the <select>, where you'll test its current value to see if it's what you want.

Answer 2

Why not use jQuery throughout with 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 has loaded. It looks for all select elements whose names start with DDLConditional. It then uses live (so that even future elements that could be added dynamically are considered) to bind a handler to the change event.

Answer 3

I'd get rid of the inline handler assignment, and use jQuery to manage your handler.

It sounds like the <select> elements are being dynamically added to the DOM, so this uses jQuery's .live() method to handle those dynamic elements.

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

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

Any time a <select> that has a name that starts with DDLConditional is added to the page, the change handler will work automatically. It gets the value of what was selected using jQuery's .val() method, and checks to see if it is the in between one.

Answer 4

Yep sure thing, just wrap the <select> in a div and you can easily append a textbox using jQuery. Something like:

<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's 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.