根据下拉列表更新隐藏的输入

I work mostly in PHP, and have just started playing with javascript. I have a form that when a drop down is selected for a province, it updates 2 hidden input fields. One with a dollar value, and one with the value sent from the drop down.

I have this working, but I am sure there are more elegant ways to do it. Any guidance to eliminate some redundancy would be great.

<script type="text/javascript">
function changeHiddenInput(objDropDown) {
    if (document.getElementById('myselect').value === "X") {
        var objHidden = document.getElementById("amount");
        objHidden.value = 2600;
        $('#customButton').attr('disabled', 'disabled');
        $('#customButton2').attr('disabled', 'disabled');
    }
    if (document.getElementById('myselect').value === "AB") {
        var objHidden = document.getElementById("amount");
        objHidden.value = <?php echo getFees('AB', 'sprice', $price); ?>;

        var objHidden2 = document.getElementById("province");
        objHidden2.value = "AB";

        $('#customButton').removeAttr('disabled');
        $('#customButton2').removeAttr('disabled');
    }
    if (document.getElementById('myselect').value === "BC") {
        var objHidden = document.getElementById("amount");
        objHidden.value = <?php echo getFees('BC', 'sprice', $price); ?>;

        var objHidden2 = document.getElementById("province");
        objHidden2.value = "BC";

        $('#customButton').removeAttr('disabled');
        $('#customButton2').removeAttr('disabled');
    }
    if (document.getElementById('myselect').value === "MB") {
        var objHidden = document.getElementById("amount");
        objHidden.value = <?php echo getFees('MB', 'sprice', $price); ?>;

        var objHidden2 = document.getElementById("province");
        objHidden2.value = "MB";

        $('#customButton').removeAttr('disabled');
        $('#customButton2').removeAttr('disabled');
    }
    if (document.getElementById('myselect').value === "NB") {
        var objHidden = document.getElementById("amount");
        objHidden.value = <?php echo getFees('NB', 'sprice', $price); ?>;

        var objHidden2 = document.getElementById("province");
        objHidden2.value = "NB";

        $('#customButton').removeAttr('disabled');
        $('#customButton2').removeAttr('disabled');
    }
    if (document.getElementById('myselect').value === "NL") {
        var objHidden = document.getElementById("amount");
        objHidden.value = <?php echo getFees('NL', 'sprice', $price); ?>;

        var objHidden2 = document.getElementById("province");
        objHidden2.value = "NL";

        $('#customButton').removeAttr('disabled');
        $('#customButton2').removeAttr('disabled');
    }
    if (document.getElementById('myselect').value === "NS") {
        var objHidden = document.getElementById("amount");
        objHidden.value = <?php echo getFees('NS', 'sprice', $price); ?>;

        var objHidden2 = document.getElementById("province");
        objHidden2.value = "NS";

        $('#customButton').removeAttr('disabled');
        $('#customButton2').removeAttr('disabled');
    }
    if (document.getElementById('myselect').value === "ON") {
        var objHidden = document.getElementById("amount");
        objHidden.value = <?php echo getFees('ON', 'sprice', $price); ?>;

        var objHidden2 = document.getElementById("province");
        objHidden2.value = "ON";

        $('#customButton').removeAttr('disabled');
        $('#customButton2').removeAttr('disabled');
    }
    if (document.getElementById('myselect').value === "PE") {
        var objHidden = document.getElementById("amount");
        objHidden.value = <?php echo getFees('PE', 'sprice', $price); ?>;

        var objHidden2 = document.getElementById("province");
        objHidden2.value = "PE";

        $('#customButton').removeAttr('disabled');
        $('#customButton2').removeAttr('disabled');
    }
    if (document.getElementById('myselect').value === "QC") {
        var objHidden = document.getElementById("amount");
        objHidden.value = <?php echo getFees('QC', 'sprice', $price); ?>;

        var objHidden2 = document.getElementById("province");
        objHidden2.value = "QC";

        $('#customButton').removeAttr('disabled');
        $('#customButton2').removeAttr('disabled');
    }
    if (document.getElementById('myselect').value === "SK") {
        var objHidden = document.getElementById("amount");
        objHidden.value = <?php echo getFees('SK', 'sprice', $price); ?>;

        var objHidden2 = document.getElementById("province");
        objHidden2.value = "SK";

        $('#customButton').removeAttr('disabled');
        $('#customButton2').removeAttr('disabled');
    }
    if (document.getElementById('myselect').value === "NT") {
        var objHidden = document.getElementById("amount");
        objHidden.value = <?php echo getFees('NT', 'sprice', $price); ?>;

        var objHidden2 = document.getElementById("province");
        objHidden2.value = "NT";

        $('#customButton').removeAttr('disabled');
        $('#customButton2').removeAttr('disabled');
    }
    if (document.getElementById('myselect').value === "NU") {
        var objHidden = document.getElementById("amount");
        objHidden.value = <?php echo getFees('NU', 'sprice', $price); ?>;

        var objHidden2 = document.getElementById("province");
        objHidden2.value = "NU";

        $('#customButton').removeAttr('disabled');
        $('#customButton2').removeAttr('disabled');
    }
    if (document.getElementById('myselect').value === "YT") {
        var objHidden = document.getElementById("amount");
        objHidden.value = <?php echo getFees('YT', 'sprice', $price); ?>;

        var objHidden2 = document.getElementById("province");
        objHidden2.value = "YT";

        $('#customButton').removeAttr('disabled');
        $('#customButton2').removeAttr('disabled');
    }
}
</script>

<select required name="prov" id="myselect" class="dropit" onchange="changeHiddenInput(this)">
    <option value="X">Select ship to province</option>
    <option value="AB">Alberta</option>
    <option value="BC">British Columbia</option>
    <option value="MB">Manitoba</option>
    <option value="NB">New Brunswick</option>
    <option value="NL">Newfoundland/Labrador</option>
    <option value="NS">Nova Scotia</option>
    <option value="ON">Ontario</option>
    <option value="PE">Prince Edward Island</option>
    <option value="QC">Quebec</option>
    <option value="SK">Saskatchewan</option>
    <option value="NT">Northwest Territories</option>
    <option value="NU">Nunavut</option>
    <option value="YT">Yukon</option>
</select>
<input type="hidden" name="amount" id="amount" value="">
<input type="hidden" name="province" id="province" value="">

</div>

First thing you need to do is add an attribute price to each option tag, then change the script to this (Run this snippet to see your desired result)

function changeHiddenInput(objDropDown)
            {
                var selectedOption = objDropDown.children[objDropDown.selectedIndex];
                var price = selectedOption.getAttribute('price');
                var province = objDropDown.value;
                document.getElementById('province').value = province;
                document.getElementById('amount').value = price;
                console.log('Province changed to: '+province);
                console.log('Price changed to: '+price);
        
        $('#customButton').attr('disabled', 'disabled');
        $('#customButton2').attr('disabled', 'disabled');
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select required name="prov" id="myselect" class="dropit" onchange="changeHiddenInput(this)">
    <option price="2600" value="X">Select ship to province</option>
    <option price="455" value="AB">Alberta</option>
    <option price="4212" value="BC">British Columbia</option>
    <option price="5445" value="MB">Manitoba</option>
    <option price="445" value="NB">New Brunswick</option>
    <option price="3434" value="NL">Newfoundland/Labrador</option>
    <option price="3433" value="NS">Nova Scotia</option>
    <option price="3434" value="ON">Ontario</option>
    <option price="434" value="PE">Prince Edward Island</option>
    <option price="333" value="QC">Quebec</option>
    <option price="3434" value="SK">Saskatchewan</option>
    <option price="2323" value="NT">Northwest Territories</option>
    <option price="23" value="NU">Nunavut</option>
    <option price="2323" value="YT">Yukon</option>
</select>
<input type="hidden" name="amount" id="amount" value="">
<input type="hidden" name="province" id="province" value="">

</div>

Please use the below code. Hope it will help.

Use jQuery to attach the combobox "change" event, remove onchange="changeHiddenInput(this)"event from select tag in html. Just to make it clean.
Clear the "province" and "amount" hidden field.
if "X" is selected, set the amount = 2600 and disable the buttons otherwise, set the selected province and set the amount from getFees method.

$(document).ready(function()
{
    $('#myselect').change(function(){
                $('#province').val('');
        $('#amount').val('');
        var selectedOption = $(this).val();
        if(selectedOption === "X")
        {
            $('#amount').val("2600");
            $('#customButton').attr('disabled', 'disabled');
            $('#customButton2').attr('disabled', 'disabled');
        }
        else
        {
            var amount = <?php echo getFees(selectedOption, 'sprice', $price); ?>;
            $('#province').val(selectedOption);
            $('#amount').val(amount);
            $('#customButton').removeAttr('disabled');
            $('#customButton2').removeAttr('disabled');
        }
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select required name="prov" id="myselect" class="dropit" >
        <option value="X">Select ship to province</option>
        <option value="AB">Alberta</option>
        <option value="BC">British Columbia</option>
        <option value="MB">Manitoba</option>
        <option value="NB">New Brunswick</option>
        <option value="NL">Newfoundland/Labrador</option>
        <option value="NS">Nova Scotia</option>
        <option value="ON">Ontario</option>
        <option value="PE">Prince Edward Island</option>
        <option value="QC">Quebec</option>
        <option value="SK">Saskatchewan</option>
        <option value="NT">Northwest Territories</option>
        <option value="NU">Nunavut</option>
        <option value="YT">Yukon</option>
    </select>
                                
    <input type="hidden" name="amount" id="amount" value="">  
    <input type="hidden" name="province" id="province" value="">

</div>

function myFunction() {
 var e = document.getElementById("myselect");
 var strUser = e.options[e.selectedIndex].value;
 var province = document.getElementById("province");
 var amt = document.getElementById("amount");
    province.value = strUser;
    amt.value = getFees(province, 'sprice', $price);
}

<select required name="prov" id="myselect" class="dropit" onchange="myFunction()">
        <option value="X">Select ship to province</option>
        <option value="AB">Alberta</option>
        <option value="BC">British Columbia</option>
        <option value="MB">Manitoba</option>
        <option value="NB">New Brunswick</option>
        <option value="NL">Newfoundland/Labrador</option>
        <option value="NS">Nova Scotia</option>
        <option value="ON">Ontario</option>
        <option value="PE">Prince Edward Island</option>
        <option value="QC">Quebec</option>
        <option value="SK">Saskatchewan</option>
        <option value="NT">Northwest Territories</option>
        <option value="NU">Nunavut</option>
        <option value="YT">Yukon</option>
    </select>
                                
    <input type="hidden" name="amount" id="amount" value="">  
    <input type="hidden" name="province" id="province" value="">

</div>