Problème navigateur

<select id="selectpolice">
    <option onclick="setpolice();" value="0" selected>Defaut</option>
    <option onclick="setpolice();" style="font-family: Arial,générique;" value="arial">Police 1</option>
    <option onclick="setpolice();" style="font-family: Calibri,générique;" value="calibri">Police 2</option>
    <option onclick="setpolice();" style="font-family: Courier new,générique;" value="courier new">Police 3</option>
    <option onclick="setpolice();" style="font-family: Garamond,générique;" value="Trébuchet MS">Police 4</option>
    <option onclick="setpolice();" style="font-family: Helvética,générique;" ;value="helvetica">Police 5</option>
    <option onclick="setpolice();" style="font-family: Times New Roman,générique;" value="times new">Police 6</option>
    <option onclick="setpolice();" style="font-family: Papyrus,générique;" value="Papyrus">Police 7</option>
    <option onclick="setpolice();" style="font-family: Comic sans MS,générique;" value="Comic sans MS">Police 8</option>
    <option onclick="setpolice();" style="font-family: segoe script,générique;" value="segoe script">Police 9</option>
</select>
<script type="text/javascript">
    var selectPolice = document.getElementById('selectpolice').options[document.getElementById('selectpolice').selectedIndex].style.fontFamily;
    $('#selectpolice').css('fontFamily', selectPolice);
    
    function setpolice(){
    selectPolice = document.getElementById('selectpolice').options[document.getElementById('selectpolice').selectedIndex].style.fontFamily;
    $('#selectpolice').css('fontFamily', selectPolice);
    
    var selectPolicev = document.getElementById('selectpolice').options[document.getElementById('selectpolice').selectedIndex].value;
    $('#police').val(selectPolicev);
    }
</script>