Javascript onchange下拉助手

I am trying a javascript onchange method I am new in coding. What I want when I select ID Type the input text to change to passport and when I select South African ID the input to change to South African ID here is a code. The passport field its hidden once I select a password, South African ID must change in the passport

 <div class="editor-label"><label for="IDType">ID Type:</label></div>
    <div class="editor-field"><select class="editor-dropdown" id="IdType" name="IDType">
    <option value="SouthAfricanId">South African ID</option>
    <option value="Passport">Passport</option>
    <input id="Passport" name="Passport" type="hidden" value="True">           
    </div>
    <div class="editor-label">
    <label id="lbIDValue">South African ID:</label>
    </div>
    <div class="editor-field">
    <input class="textbox" id="txIdValue" maxlength="13" name="IDValue" type="text" value="">
    </div>

You could try the JQuery below:

$("#IdType").change(function(){
    $("#lbIDValue").val($(this).find("option:selected").text());
    if($(this).val() == "passport"){
        $('#Passport').hide();
    }
    else{
        $('#Passport').show();
    }
})

If you are not using jQuery, you can use pure JavaScript to achieve the desired result. Attach a change event to the select element, then use event.target.value to find out which option was selected.

var select = document.getElementById('IdType');
var options = select.getElementsByTagName('option');
var label = document.getElementById('lbIDValue');

function selectChanged(e) {
   var value = e.target.value;
   var option;

    for (var i = 0; i < options.length; i++) {
        if (options[i].value === value) {
            option = options[i];   
        }
    }

    label.innerText = option.innerText;
}

select.addEventListener('change', selectChanged, false);

See jsFiddle - http://jsfiddle.net/60dsnhrt/

Also the html was invalid - it should have a closing select