SO 2013-12-16

by john_s

HTML

<label>Subject:</label>
<select name="subject" id="subject" onchange="subj();">
    <option value="english">English</option>
    <option value="science">Science</option>
    <option value="maths">Mathematics</option>
    <option value="history">History</option>
    <option value="other1">Other</option>
</select>
<br>
<div id="addSubjDiv" style="display: none;">
    <label>Add</label><input type="text" id="addSubjInput" value="" /><button id="addSubjBtn">Add</button>    
</div>
<script>
$(function() {
    $('#addSubjBtn').click(function() {
         var subj = $('#addSubjInput').val();
         $('#subject').append('<option selected="selected">' + subj + '</option>');
        $('#addSubjDiv').hide();
    });
});
function subj() {
    if ($('#subject').val() == 'other1') {
        $('#addSubjInput').val('')
        $('#addSubjDiv').show();
    } else {
        $('#addSubjDiv').hide();
    }
}
</script>