Отображение скрытого HTML-кода с помощью jQuery

ProgramBox

Отображение скрытого HTML-кода с помощью jQuery

Post author:admin
Запись опубликована:26 апреля, 2023
Post category:Вопросы по программированию

#javascript #jquery

Вопрос:

Есть другое решение для отображения скрытого ввода, когда пользователь выбирает опцию из 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>

1. Я хочу поместить HTML-код (скрытый ввод) вне JS-кода.

2. Мне чрезвычайно любопытно, что это значит. И, кроме того, почему?

3. Потому что я добавил много скрытых полей, и я хочу контролировать и редактировать их вне JS-кода

4. «Снаружи»? Что это значит? Вы имеете в виду, что хотите сделать message_display div видимым? Или вы хотите добавить к нему контент?

5. Я хочу написать HTML-код и установить для него значение (hidden или display: none) И он будет показан, как только я выберу значение из тега select

Ответ №1:

Я, как и другие, немного сбит с толку, но, насколько я понимаю вашу проблему, у вас есть в основном рабочий код.

Вам нужно установить идентификатор выбора в payment_option и поместить сообщение display 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(); }


    });
});

1. ДА, да, но, пожалуйста, посмотрите мою правку в исходном сообщении. Чтобы понять, чего я хочу

2. итак, вы хотите, чтобы сообщение [1] = <тип ввода = «текст» имя = «электронная почта» размер = «30» /> находилось вне js?

3. просто HTML-код: <input type="text" name="email" size="30" />

4. итак, поместите html в html, скройте его с помощью CSS и установите для сообщения [1] значение hiddeninput примерно так: message[1] = $(‘.HiddenInput’)

5. @MiniNaimm, я рад, что тебе это нравится. Не забудьте принять решения и проголосовать за них =)

Ответ №2:

Я думаю, вы имеете в виду, что хотите сделать message_display div видимым…

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

или отредактируйте CSS более конкретно:

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

Я бы рекомендовал просмотреть jQuery API — это хорошее чтение, и оно показывает вам, как много можно сделать и насколько легко:http://api.jquery.com

1. Теперь, если я хочу отредактировать или добавить что-то к скрытому вводу, я должен вернуться к JS-коду и сделать это… Но я хочу установить свой скрытый ввод вне js-кода, это возможно?

2. Боюсь, все эти разговоры о «внутри» и «снаружи» JS-кода очень странные. Если вы хотите изменить разметку веб-страницы, вам необходимо использовать Javascript. Вы можете изменить содержимое данного тега следующим образом: $("#tag_id").html("new content"); или вы можете использовать append() , как вы сделали выше, но это не приведет к удалению текущего содержимого, это просто добавит новое содержимое в конец тега.

3. Да, просто используйте код, который у вас есть, и добавьте $("#message_display").show(); после вашего if утверждения. Это не очень аккуратный код, но он может сработать, если его немного доработать.

Ответ №3:

Вы пытаетесь сделать что-то подобное?

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