Question

我主要在PHP工作，刚开始玩javascript。我有一个表单，当为省选择下拉菜单时，它会更新2个隐藏的输入字段。一个具有美元值，一个具有从下拉发送的值。

我有这个工作，但我相信有更优雅的方法来做到这一点。任何消除一些冗余的指导都会很棒。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

使用jQuery附加组合框“更改”事件，从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="">

Answer 2

您需要做的第一件事是为每个选项标签添加属性价格，然后将脚本更改为此（运行此代码段以查看所需结果）

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

Answer 3

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

3 个答案: