4

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.

Improve this question
5
  • What are you asking? How to make the textbox and label appear? How to dynamically add new dropdown? How to make an event fire from every dropdown? Commented Oct 7, 2010 at 20:26
  • What's your question? Are you having a specific problem implementing this? Commented Oct 7, 2010 at 20:27
  • @Deano - If you're confused about all the down-votes on the answers given, just be aware that they're all presumably from one user who is even more confused. Commented Oct 7, 2010 at 20:42
  • 1
    I'm gonna upvote all your answers to avoid this stupid confusion. Commented Oct 7, 2010 at 20:45
  • 1
    @Marko - I've got yours covered too. :o) Commented Oct 7, 2010 at 20:46

4 Answers 4

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

You want 'click', not 'change'. This won't work in 1.3.2 and ie.
@Stefan - So jQuery 1.3.2 is being used here? That's why you down-voted me? Because I really don't see that anywhere in the question.
@Stefan, You're an idiot. It DOES work in IE6/7/8 and the OP never mentioned jQuery 1.3.2. jsfiddle.net/JhBdm. Now give me my vote back :)
@patrick wouldn't val() simply return a blank string? I think you want the text() of the option :)
@Vivin - Actually, no. When there isn't a value assigned to the <option>, the value property defaults to the text content. The only issue is that the value property for IE6 doesn't do this, but jQuery's .val() corrects it. :o)
|
1

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.

Improve this answer

Comments

1

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.

Improve this answer

5 Comments

@Stefan What are you talking about? Where does jQuery 1.3.2 and IE even come into this? That's why you downvoted? Please don't downvote without valid reason.
Apparently @Stefan thinks we're not allowed to give answers that aren't compatible all the way back to... what... jQuery version 1?
I've flagged his comments as noise.
@patrick. Apparently. I wish people would spell out their disagreement. This kind of mass downvoting is completely unhelpful; even seems spiteful.
Vivin - Agreed. Seems especially spiteful since @Stefan didn't stick around to enter into any discussion. More like a hit 'n run.
0

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.

Improve this answer

2 Comments

I don't recall anything about 1.3.2, and I also don't recall IE complaining about onchange. Next time you disagree with a group of answers, post a better solution instead of being unhelpful.
Thank you all of you for your prompt responses. The ".live" solution works for me, and on IE8. My next challenge is to show two dynamically created and enumerated controls (one label and one text box) based on the "is between" being selected.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.