使用AJAX提交选择值PHP

Question

I have this code but i can not change the variable on submit without refresh the page. Can you help me do it with AJAX ?

Code: ................................................................................

<form name="devices" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
    <select name="device" id="device">

        <option value="i1">i1</option>
        <option value="i2">i2</option>
     </select>

</form>

<?php

$device = "";
if(isset($_POST['device'])) {
$device = $_POST['device'];

}

switch ($device) {

    case 'i1':
    $w = 50;
    break;
    case 'i2':
    $w = 100;

    break;
    default:
    $w = 50;        
        break;
}

?>
<div style="width: <?=$w?>px; height: 100px;background-color: black;"></div>

Answer 1

<script src="jquery-3.1.1.min.js" type="text/javascript"></script>

<script type="text/javascript" src="javascript.js">
    //get value of the select box
    var device = document.getElementById('device').value;

    //post ajax jquery command
    $.post(<?php echo "'".$_SERVER['PHP_SELF']."'"; ?>, {
            device:device
    }, function(result){
            alert(result);
    });
    //it will send post data by post method
</script>

Please Download the jquery file and put beside the php file

<a href="https://jquery.com/">https://jquery.com/</a>


<form name="devices" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
    <select name="device" id="device">

        <option value="i1">i1</option>
        <option value="i2">i2</option>
     </select>

</form>

<?php

$device = "";
if(isset($_POST['device'])) {
$device = $_POST['device'];

}

switch ($device) {

    case 'i1':
    $w = 50;
    break;
    case 'i2':
    $w = 100;

    break;
    default:
    $w = 50;        
        break;
}

?>
<div style="width: <?=$w?>px; height: 100px;background-color: black;"></div>

</div>