Обработчик событий считывает значение в html-списке и отображает html при этом условии

Извините, мой опыт работы с html и javascript ограничен, поэтому я пытаюсь найти лучший способ сделать это. По существу, я имею дело с некоторым html, который создает форму для пользователей, чтобы отправить сообщения. Форма позволяет выбрать тему и текст для ввода.

                    <td>Subject</td>
                    <td>
                        <select id="subject">
                            <option selected="selected" value="none">Please select a subject</option>
                            {% for subject in MESSAGE_SUBJECTS %}
                                <option value="{{subject}}">{{subject}}</option>
                            {% endfor %}
                        </select>
                        <!-- <input type="text" id="subject" size="80" value='No Subject' onfocus="if(this.value==this.defaultValue)this.value='';" name="subject" /> -->
                    </td>
                </tr>
                <tr>
                    <td>Message</td>
                    <td><textarea id="newmessage" cols="80" rows="6"
                            onfocus="if(this.value==this.defaultValue)this.value='';"
                            name="newmessage">Please type your message here</textarea></td>
                </tr>

Не вдаваясь в излишние подробности, субъекты представляют собой просто ряд строк. Для целей данной статьи мы можем назвать их просто 'sub1' и 'sub2'. Я хочу сделать так, чтобы текстовая область появлялась только при выборе 'sub1' из выпадающего списка.

Я полагаю, что обработчик событий javascript - это то, что нужно, и есть связанный файл javascript с некоторыми функциями, но я не могу понять, как выглядит синтаксис. Я предполагаю, что это что-то вроде:

function conditionalMessage() {
    if( subject == "sub2" ) {
        //some code that defines displaying text to explain now message can be sent with this subject
}   else {
        //some code that displays the message box as it currently does
}
 

Является ли это случаем определения поля сообщения и текстового ответа как divs и последующего вызова divs?

Это система, основанная на Django.

Спасибо за любую помощь

Предполагая это как отображаемый html

<select id="subject">
    <option selected="selected" value="none">Please select a subject</option>
    <option value="sub1">sub1</option>
    <option value="sub2">sub2</option>
</select>

Вы можете использовать слушатель события onchange следующим образом

Javascript

document.getElementById('subject').addEventListener('change', function() {
    if(this.value=='sub1'){
        document.getElementById('newmessage').style.display='block';
    }
    else
        document.getElementById('newmessage').style.display='none';
});

Но перед этим примените этот css к textarea

#newmessage{
    display:none;
}
Вернуться на верх