Question

I have a select with two options in it. I’d like the default option to have an input displayed below the select element, while the other option, when selected, hides that input and instead displays a paragraph of text. I’ve tried using bind and change but I can’t manage to get it to work. What’s the best way to do this?

Answer 1

Something along these lines should do the trick:

​<select id="foo">
    <option value="1">Enter a value</option>
    <option value="2">Show some text</option>
</select>

<input id="input" type="text"/>

<p id="text" style="display:none">
    Blah blah blah blah blah blah blah blah 
    blah blah blah blah blah blah blah blah 
</p>​​​​​​​​​​​

---

​$('#foo').change(function() {
    var el = $(this);
    if(el.val() === "1") {
        $('#input').show();
        $('#text').hide();            
    } else {
        $('#text').show();
        $('#input').hide();
    }      
});​​​​​​

http://jsfiddle.net/J5Enp/