更新隱藏的輸入基於下拉

我主要在PHP工作，並剛剛開始使用JavaScript。我有一個表格，當爲一個省選擇了一個下拉菜單時，它會更新2個隱藏的輸入字段。一個具有美元價值，另一個具有從下拉式發送的價值。更新隱藏的輸入基於下拉

我有這個工作，但我相信有更優雅的方式來做到這一點。任何消除冗餘的指導都會很棒。

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

來源

2017-09-03 RobertVDK

你需要做的第一件事情就是添加一個屬性的價格每個選項標籤，然後更改腳本這個（運行這個片段看到你想要的結果）

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

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

來源

2017-09-03 13:47:22

請使用下面的代碼。希望它會有所幫助。

使用jQuery附加組合框「change」事件，從html中的select標籤中刪除onchange="changeHiddenInput(this)"事件。只是爲了使它乾淨。
清除「省」和「金額」隱藏字段。
如果選擇「X」，則設置金額= 2600，否則禁用按鈕，設置所選省份並從 getFees方法設置金額。

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

 
});

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

來源

2017-09-03 13:35:27 ExtremeCoder

你應該指出您對代碼所做的和爲什麼要解釋你的答案 –

添加了解釋什麼樣的變化。謝謝 – ExtremeCoder

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()"> 
 
\t \t <option value="X">Select ship to province</option> 
 
\t \t <option value="AB">Alberta</option> 
 
\t \t <option value="BC">British Columbia</option> 
 
\t \t <option value="MB">Manitoba</option> 
 
\t \t <option value="NB">New Brunswick</option> 
 
\t \t <option value="NL">Newfoundland/Labrador</option> 
 
\t \t <option value="NS">Nova Scotia</option> 
 
\t \t <option value="ON">Ontario</option> 
 
\t \t <option value="PE">Prince Edward Island</option> 
 
\t \t <option value="QC">Quebec</option> 
 
\t \t <option value="SK">Saskatchewan</option> 
 
\t \t <option value="NT">Northwest Territories</option> 
 
\t \t <option value="NU">Nunavut</option> 
 
\t \t <option value="YT">Yukon</option> 
 
\t </select> 
 
           
 
\t <input type="hidden" name="amount" id="amount" value=""> 
 
\t <input type="hidden" name="province" id="province" value="">

來源

2017-09-03 14:29:50

請說清楚你做了什麼。 – Spectarion

更新隱藏的輸入基於下拉

回答

相關問題