Display hidden html code with jQuery

There is another solution to display a hidden input when a user choose an option from the select tag? I want to put the HTML code outside the JS code.

jQuery code:

$(function() {

    var message = new Array(),
        $paymentOption = $("#payement_option"),
        $messageDisplay = $("#message_display");

    message[1] = '<input type="text" name="email" size="30" />';

    $paymentOp开发者_C百科tion.change(function() {

        var messageIndex = $(this).val();

        $messageDisplay.empty();

        if (messageIndex > 0) 
            $messageDisplay.append(message[messageIndex]);

    });

});

HTML code like this:

<select name="option"><option value="0">yes</option><option value="1">no</option</select>

the output:

<div id="message_display"></div>

EDIT:

I want something like:

<div id="message_display">
    <input type="text" name="email" size="30" />
</div>

I, as the others are bit confused, but from my understanding of your problem you have basically working code.

You need to set select id to payment_option and put the message display div on the page. otherwise it cannot find what it needs to append the value to.

change it to this: HTML

<select name="option" id="payement_option">
    <option value="0">yes</option>
    <option value="1">no</option>
</select>

<div id="message_display"></div>

JQUERY

$(function () {
    var message = new Array();
    //set message[0] = 'stuff' if you want something to display when yes is selected
    message[1] = '<input type="text" name="email" size="30" />';
    $("#payement_option").change(function () {
        //gets the message index
        var message_index = $("#payement_option").val();
        //emptys the value from message display
        $("#message_display").empty();

       //if option is not YES display message[val]
        if (message_index > 0) {
            $("#message_display").append(message[message_index]);
        }
    });
});

and a live example: http://jsfiddle.net/mCqfq/

EDIT:

you mean like this? http://jsfiddle.net/dEwcK/

HTML:

<select name="option" id="payement_option">
    <option value="0">yes</option>
    <option value="1">no</option>
</select>

<div id="message_display"><input type="text" name="email" size="30" id="hiddenInput" /></div>

CSS:

#message_display {display: none;}

JQUERY:

$(function () {
    $("#payement_option").change(function () {
        var message_index = $("#payement_option").val();


        if (message_index > 0) {
            $("#message_display").show();
        }
        else { $("#message_display").hide(); }


    });
});

I think you mean you want to make the message_display div visible...

$("#message_display").show();

or edit the CSS more specifically:

$("#message_display").css("display", "block");

I'd recommend have a browse through the JQuery API - it's a good read and shows you how much can be done and how easily: http://api.jquery.com

Are you trying to do something like this?

$('#myselect').change(function(){
    var box = $(this);
    if (box.val() === 'some predetermined value') {
        $("#message_display").show();
    }
});