php Dropdown实时更新

My apologies if this has been answered before but I did do a search and haven't seen any answers for the questions asked in other posts. The answers I did see didn't relate to my question (mostly to do with dropdowns getting results from mysql).

I have a php dropdown list where you need to select a value (1, 2 or 3). Based on what you select, the list should update a variable and show a hidden div tag. Now from the information I gathered it seems like this cannot be done with php alone but requires a javscript or ajax script.

php:

<form>
    <select name="options" onchange="{dosomething}">
        <option value="0">[Select value]</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
     </select><br>
</form>

This should then update this variable and div in REALTIME:

<div id="test" style="display:none">
    $answer= 1 + $value
    <?php
        echo "1 + $value = $answer";
</div>

javascript/ajax:

<script>
    function dosomething {
        #update $value based on dropdown and do calculation
        #unhide div with id "test"  
    }
</script>

I need to mention that I have no knowledge of javascript or ajax.

If you only need to view the new result in the same page without requesting something to the server add this script below your last div:

<script>

var element = document.getElementsByName('options');
if( element.length > 0 ){
    element[0].addEventListener('change',update_text,false);
        //element[0].addEventListener('change',function(){update_text(param)},false);
}

function update_text(evt){
    console.log(evt);
    var first_element = evt.target;
    var selection = first_element.options[first_element.selectedIndex].value;
    //do math:
    selection = +selection + 1; //this cast selection as number and not as String

    console.log(selection);
    var test = document.getElementById('test');
    test.style.display = 'block';
    test.innerHTML = `<p>${selection}</p>`;
};

</script>