php - 如何更新block元素的样式并将参数传递给PHP函数

我确定我已经使事情复杂化了，但是我试图通过引用的HTML完成两件事。当用户选择一个选项时，如果符合条件，我想将leaderTable的显示样式从隐藏切换为可见（我已经成功完成了下面的JS）

我还想将所选选项的值作为参数传递给PHP函数，该函数将设置一个$ _SESSION变量，供我使用。

据我了解，我将不得不使用AJAX请求将值传递给php脚本，但我并不完全了解AJAX POST与GET。

的HTML

<select id="rate_type" name="rate_type">
<option value="">Select One</option>
<option value="1">Non-Supervisors</option>
<option value="2">Supervisors</option>
<option value="3">Manager</option>
<option value="4">Director</option>
<option value="5">Sales</option>
<option value="6">Executive</option>
</select>

JS

<script>
window.onload = function() {
      var eSelect = document.getElementById('rate_type');
        var leaderTable = document.getElementById('leadership');

        eSelect.onchange = function() {
            if((eSelect.selectedIndex == 2) || (eSelect.selectedIndex == 3) || (eSelect.selectedIndex == 4) || (eSelect.selectedIndex == 5) || (eSelect.selectedIndex == 6)){

                leaderTable.style.display= 'block';


                } else {

                leaderTable.style.display = 'none';

            }

        }
    }

</script>

最佳答案

下面的代码将添加来自Google的jQuery src，并在更改后向服务器发出ajax请求。有关更多信息，请参见jQuery POST。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
        $('#rate_type').change(function() {
            if(($(this).val() == 2) || ($(this).val() == 3) || ($(this).val() == 4) || ($(this).val() == 5) || ($(this).val() == 6)){
                $('#leadership').show();
            } else {
                $('#leadership').hide();
            }

            // this is the shorthand post
            $.post(
                // the url
                '<?php echo $_SERVER['PHP_SELF'] ?>',
                // the request parameters to send
                {
                    rate_type: $('#rate_type').val(),
                    some_other_var: 'junk'
                },
                function(data) {
                    // do something here
                    console.log(data);
            });
        });
        // fire the change event on load if needed
        $('#rate_type').change();
});
</script>