Javascript php下拉式实时更新

如果之前有人回答过我的问题，我深表歉意，但我确实做了搜索，没有看到其他帖子中所问问题的任何答案。我所看到的答案与我的问题并不相关，主要与从mysql获取结果的下拉列表有关

我有一个php下拉列表，您需要在其中选择值1、2或3。根据所选内容，列表应更新变量并显示隐藏的div标记。现在从我收集的信息来看，这似乎不能单独用php来完成，而是需要一个javscript或ajax脚本

php:

然后应实时更新此变量和div：

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

javascript/ajax：

---

我需要指出的是，我不了解javascript或ajax。

如果您只需要在同一页面中查看新结果，而不需要向服务器请求任何内容，请在最后一个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>

---

将其包含在html的头部。code.jquery.com/jquery-1.10.2.js>。将id=选项添加到您的选择中。添加以下代码$test.html$options选项：selected.text；如果您使用jQuery，您可以使用$'select'将事件侦听器添加到选择框中。在'change'上，函数{}；在这个函数中，使用$.ajaxor$.getjson对服务器进行ajax调用，并在回调函数中显示您的div

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

<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>