ドロップダウンに基づく隠れた入力を更新する

Question

私は主にPHPで動作し、ちょうどjavascriptで再生を開始しました。私は州のドロップダウンが選択されると、2つの隠された入力フィールドを更新するフォームを持っています。 1つはドル値で、もう1つはドロップダウンから送信された値です。

私はこれを使用していますが、それを行うためのよりエレガントな方法があると確信しています。いくつかの冗長性を排除するためのガイダンスは素晴らしいでしょう。

<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

最初にやるべきことは

（ご希望の結果を表示するには、このスニペットを実行します）、その後これにスクリプトを変更するには、各オプションタグに属性価格を追加することです

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

Answer 2

以下のコードを使用してください。それが助けてくれることを願って。

• コンボボックスの「変更」イベントを添付するためにjQueryを使用し、onchange="changeHiddenInput(this)"イベントをhtmlのselectタグから削除します。 ちょうどそれをきれいにする。
• 「州」と「金額」の非表示フィールドをクリアします。
• 「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="">

Answer 3

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