php Dropdown实时更新

Question

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.

Answer 1

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>