javascript - 根据下拉菜单更新隐藏输入

Question

我主要使用 PHP 工作，并且刚刚开始使用 javascript。我有一个表单，当为某个省份选择下拉列表时，它会更新 2 个隐藏的输入字段。一种具有美元值(value)，另一种具有从下拉列表中发送的值(value)。

我已经完成了这个工作，但我确信还有更优雅的方法可以做到这一点。任何消除一些冗余的指导都会很棒。

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

Answer 1

请使用以下代码。希望它会有所帮助。

• 使用 jQuery 附加组合框“change”事件，从 html 中的 select 标签中删除 onchange="changeHiddenInput(this)" 事件。 只是为了让它干净。
• 清除“省份”和“金额”隐藏字段。
• 如果选择“X”，则设置金额 = 2600 并禁用按钮，否则，设置所选省份并设置金额 getFees 方法。

$(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="">