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

Question

I'm sure I am over complicating things but I am trying to accomplish 2 things with the referenced HTML. When user selects an option, I want to toggle the display style of the leaderTable from hidden to visible if it meets the criteria (this I have done successfully with the JS that follows)

I also want to pass the value of the selected option as an argument to a PHP function that will set a $_SESSION variable which I can use.

From my understanding I would have to use an AJAX request to communicate the value to the php script but I don't fully understand AJAX POST vs 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>

Answer 1

The code below will add the jquery src from google, and make an ajax request to the server on change. See jQuery POST for more info.

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