Question

当用户从select标签中选择一个选项时，还有另一种显示隐藏输入的解决方案吗？ 我想将HTML代码放在JS代码之外。

jQuery代码：

$(function() {

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

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

    $paymentOption.change(function() {

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

        $messageDisplay.empty();

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

    });

});

HTML代码如下：

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

输出：

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

修改

我想要类似的东西：

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

Answer 1

我，因为其他人有点困惑，但从我对你的问题的理解，你基本上工作代码。

您需要将select id设置为payment_option并将消息显示div放在页面上。否则它无法找到附加值所需的内容。

将其更改为： 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]);
        }
    });
});

和一个实例：http://jsfiddle.net/mCqfq/

编辑：

你是说这个意思吗？ 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(); }


    });
});

Answer 2

我认为你的意思是你想让message_display div可见......

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

或更具体地编辑CSS：

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

我建议您浏览一下JQuery API - 这是一个很好的阅读，并向您展示可以完成的工作量和容易程度：http://api.jquery.com

Answer 3

你想做这样的事吗？

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

使用jQuery显示隐藏的html代码

3 个答案: