javascript，html中select框中的始发地和目的地发生变化时，如何计算航班费用？

Question

如果用户更改出发地或目的地国家/地区，我正在尝试计算航班费用。

我正在用 if....else 尝试它，我尝试用 switch...case 但没有让它像我想要的那样工作。

它确实在第一个 if 前停下了。如果我用 else if 尝试它，它只会计算最后一部分。

这是来自 if....else 分支的片段。

function change(object) {
        document.f.control.value = object.name + ", " + object.value + ", Content new";
            
            var a = document.getElementById("1") 
            var b = document.getElementById("2") 
            var c = document.getElementById("3") 
            var d = document.getElementById("4") 
            var e = document.getElementById("5") 
            
                
            var a = 150;
            var b = 200;
            var c = 250;
            var d = 300;
            var e = 350;
                
            if (result = a + a){
            alert("The Cost of your journey will be about: " + result + "€");
            }
            else if (result = a + b){
            alert("The Cost of your journey will be about: " + result + "€");
            }
            else if (result = a + c){
            alert("The Cost of your journey will be about: " + result + "€");
            }
            else if (result = a + d){
            alert("The Cost of your journey will be about: " + result + "€");
            }
            else if (result = a + e){
            alert("The Cost of your journey will be about: " + result + "€");
            }

这是完整的代码：

<!doctype html>
<!-- Written by Igor Stefanovic -->
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Formular eigenes Beispiel 4.7</title>
        <style> body {background: url(bIecaU.jpg) no-repeat scroll ; display: flex; background-size: cover;background-color: rgba(0,0,0,0);}
                select {border-color: aqua; background-color: rgba(0,0,0,0); font-family: Arial; color: aqua; display: flex;}
                input {border-color: aqua; background-color: rgba(0,0,0,0); font-family: Arial; color: aqua; display: flex;}
                checkbox {border-color: aqua; background-color: rgba(0,0,0,0); font-family: Arial; color: aqua; display: flex;}
                textarea {border-color: aqua; background-color: rgba(0,0,0,0); font-family: Arial; color: aqua; display: flex;}
                h3 {display: flex;}
                p {display: flex;}
        
        @media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
        
        </style>
        <script>
            
 function change(object) {
    document.f.control.value = object.name + ", " + object.value + ", Content new";
    let outbound = document.getElementsByClassName('outbound')[0].value
        , returnFlight = document.getElementsByClassName('return')[0].value
        , map = [0, 150, 200, 250, 300, 350]
        , result = map[parseInt(outbound)] + map[parseInt(returnFlight)];
    alert("The Cost of your journey will be about: " + result + "€");
}
    function turning(object) {
        document.f.control.value = object.name + ", " + object.value + ", Content changed";
    }

    function marked(object) {
        if (object.checked) {
            document.getElementsByClassName("returnflight")[0].style.visibility = "hidden";
            document.getElementsByClassName("dateofreturn")[0].style.visibility = "hidden";
            document.f.control.value = object.name + ", " + object.value + " marked.";
        } else {
            document.getElementsByClassName("returnflight")[0].style.visibility = "unset";
            document.getElementsByClassName("dateofreturn")[0].style.visibility = "unset";
            document.f.control.value = object.name + ", " + object.value + " not marked.";
        }
            }
    function send() 
    {
        return confirm("Do you want to send the form?");
    }
 
    function abort() {
        return confirm("Do you want to reset the form?");
    }
            
    function calculate(object)
            {
                
                
            }
            
            
        </script>
        
    </head>
    
    <body>
        
        <form name="f" method="post" action="event_form_eigbsp.php" onsubmit="return send();" onreset="return abort();">
        <input name="mrmrs"        type="radio" value="Mr." onclick="change(this);" checked="checked"> Mr.
        <input name="mrmrs"       type="radio" value="Mrs" onclick="change(this);"> Mrs.<br>
        <input name="name"      value="Name" size="20" onchange="change(this);"> Name <br>
        <input name="surname"   value="Surname" size="20" onkeyup="turn(this);"> Surname<br>
        <input name="street"    value="Street" size="20"  onkeyup="turn(this);"> Street <input name="nr" value=" " size="3" onchange="change(this);"> Nr.<br>
        <input name="city"      value="City"   size="20" onchange="change(this);"> City<br>
        <input name="postalcode" type="number" value="Postal Code" size="6" onchange="change(this);"> Postal Code<br><br>
        <select name="land" onchange="change(this);">
            <option value="Switzerland" selected="selected">Switzerland</option><br>
            <option value="Germany">Germany</option>
            <option value="Austria">Austria</option>
            <option value="United Kingdom">United Kingdom</option>
            <option value="France">France</option>
            <option value="Italy">Italy</option>
            <option value="Portugal">Portugal</option>
            <option value="Spain">Spain</option>
            <option value="Ireland">Ireland</option>
            <option value="Iceland">Iceland</option>
            <option value="Netherlands">Netherlands</option>
            <option value="Belgium">Belgium</option>
            <option value="Luxembourgh">Luxembourgh</option>
            <option value="Denmark">Denmark</option>
            <option value="Finland">Finland</option>
            <option value="Sweden">Sweden</option>
            <option value="Norway">Norway</option>
            <option value="Poland">Poland</option>
            <option value="Russia">Russia</option>
            <option value="Ukraine">Ukraine</option>
            <option value="Romania">Romania</option>
            <option value="Hungary">Hungary</option>
            <option value="Czech Republic">Czech Republic</option>
            <option value="Slovakia">Slowakia</option>
            <option value="Slovenia">Slovenia</option>
            <option value="Croatia">Croatia</option>
            <option value="Bosnia & Herzegowina">Bosnia & Herzegovina</option>
            <option value="Serbia">Serbia</option>
            <option value="Montenegro">Montenegro</option>
            <option value="Albania">Albania</option>
            <option value="Bulgary">Bulgary</option>
            <option value="Turkey">Turkey</option>
            <option value="Israel">Israel</option>
            <option value="Belarus">Belarus</option>
            <option value="Latvia">Latvia</option>
            <option value="Lithuania">Lithuania</option>
            <option value="Estonia">Estonia</option>
            <option value="Moldova">Moldova</option>
            <option value="North Makedonia">North Makedonia</option>
            <option value="Greece">Greece</option>
            <option value="Gibraltar">Gibraltar</option>
            <option value="Malta">Malte</option>
            <option value="Monte Carlo">Monte Carlo</option>
            <option value="Liechtenstein">Liechtenstein</option>
            </select> Country of Residence<br><br>
        <input name="dateofbirth" type="date" value="Date of Birth" onkeypress="turn(this);">&nbsp;&nbsp; Date of Birth<br><br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input class="flight" name="flight" type="checkbox" value="Only One Way" onclick="marked(this);">&nbsp;&nbsp; Only One Way<br><br>Outbound Country&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Return Flight Country<br>
        <select class="outboundflight" id="outboundflight" name="outboundflight" onchange="change(this);">
            <option value="1" selected="selected">Switzerland</option>
                <option class="outbound" value="1">Germany</option>
                <option class="outbound" value="1">Austria</option>
                <option class="outbound" value="2">United Kingdom</option>
                <option class="outbound" value="1">France</option>
                <option class="outbound" value="1">Italy</option>
                <option class="outbound" value="2">Portugal</option>
                <option class="outbound" value="2">Spain</option>
                <option class="outbound" value="4">Ireland</option>
                <option class="outbound" value="5">Iceland</option>
                <option class="outbound" value="2">Netherlands</option>
                <option class="outbound" value="2">Belgium</option>
                <option class="outbound" value="1">Luxembourgh</option>
                <option class="outbound" value="2">Denmark</option>
                <option class="outbound" value="4">Finland</option>
                <option class="outbound" value="4">Sweden</option>
                <option class="outbound" value="4">Norway</option>
                <option class="outbound" value="2">Poland</option>
                <option class="outbound" value="4">Russia</option>
                <option class="outbound" value="4">Ukraine</option>
                <option class="outbound" value="4">Romania</option>
                <option class="outbound" value="2">Hungary</option>
                <option class="outbound" value="2">Czech Republic</option>
                <option class="outbound" value="1">Slowakia</option>
                <option class="outbound" value="1">Slovenia</option>
                <option class="outbound" value="2">Croatia</option>
                <option class="outbound" value="3">Bosnia & Herzegovina</option>
                <option class="outbound" value="3">Serbia</option>
                <option class="outbound" value="3">Montenegro</option>
                <option class="outbound" value="4">Albania</option>
                <option class="outbound" value="4">Bulgary</option>
                <option class="outbound" value="5">Turkey</option>
                <option class="outbound" value="5">Israel</option>
                <option class="outbound" value="4">Belarus</option>
                <option class="outbound" value="3">Latvia</option>
                <option class="outbound" value="3">Lithuania</option>
                <option class="outbound" value="2">Estonia</option>
                <option class="outbound" value="4">Moldova</option>
                <option class="outbound" value="4">North Makedonia</option>
                <option class="outbound" value="4">Greece</option>
                <option class="outbound" value="2">Gibraltar</option>
                <option class="outbound" value="2">Malte</option>
                <option class="outbound" value="2">Monte Carlo</option>
                <option class="outbound" value="1">Liechtenstein</option>
            </select>
            <select class="returnflight" id="returnflight" name="returnflight" onchange="change(this);">
                <option class="return" value="1" selected="selected">Switzerland</option>
                <option class="return" value="1">Germany</option>
                <option class="return" value="1">Austria</option>
                <option class="return" value="2">United Kingdom</option>
                <option class="return" value="1">France</option>
                <option class="return" value="1">Italy</option>
                <option class="return" value="2">Portugal</option>
                <option class="return" value="2">Spain</option>
                <option class="return" value="4">Ireland</option>
                <option class="return" value="5">Iceland</option>
                <option class="return" value="2">Netherlands</option>
                <option class="return" value="2">Belgium</option>
                <option class="return" value="1">Luxembourgh</option>
                <option class="return" value="2">Denmark</option>
                <option class="return" value="4">Finland</option>
                <option class="return" value="4">Sweden</option>
                <option class="return" value="4">Norway</option>
                <option class="return" value="2">Poland</option>
                <option class="return" value="4">Russia</option>
                <option class="return" value="4">Ukraine</option>
                <option class="return" value="4">Romania</option>
                <option class="return" value="2">Hungary</option>
                <option class="return" value="2">Czech Republic</option>
                <option class="return" value="1">Slowakia</option>
                <option class="return" value="1">Slovenia</option>
                <option class="return" value="2">Croatia</option>
                <option class="return" value="3">Bosnia & Herzegovina</option>
                <option class="return" value="3">Serbia</option>
                <option class="return" value="3">Montenegro</option>
                <option class="return" value="4">Albania</option>
                <option class="return" value="4">Bulgary</option>
                <option class="return" value="5">Turkey</option>
                <option class="return" value="5">Israel</option>
                <option class="return" value="4">Belarus</option>
                <option class="return" value="3">Latvia</option>
                <option class="return" value="3">Lithuania</option>
                <option class="return" value="2">Estonia</option>
                <option class="return" value="4">Moldova</option>
                <option class="return" value="4">North Makedonia</option>
                <option class="return" value="4">Greece</option>
                <option class="return" value="2">Gibraltar</option>
                <option class="return" value="2">Malte</option>
                <option class="return" value="2">Monte Carlo</option>
                <option class="return" value="1">Liechtenstein</option>
            </select><br><br>Date of Outbound&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Date of Return<br>
            <input class="dateofoutbound" name="dateofoutbound" type="date" onchange="turning(this);">&nbsp;&nbsp;&nbsp;<input class="dateofreturn" name="dateofreturn" type="date" onclick="turning(this);">
            <br><br>
            <textarea name="comment" rows="6" cols="20" type="text" value="comment" onchange="change(this);"></textarea>Comments<br><br>
        <input name="control" type="text" value="control" size="50" readonly="readonly"><br><br>
        <input type="submit" value="Send"><input type="reset" value="Reset">
        </form>
    
    </body>

    
</html>

我已经更新了代码，但结果仍然只有 300 的值

Answer 1

尝试这样的事情：

<select id="outbound" class="outbound" name="outbound" onchange="change(this);">
<select id="return" class="returnflight" name="returnflight" onchange="change(this);">

全部value=""改为value="<id-value>"

function change(object) {
    document.f.control.value = object.name + ", " + object.value + ", Content new";
    let outbound = document.getElementById('outbound').value
        , returnFlight = document.getElementById('return').value
        , map = [0, 150, 200, 250, 300, 350]
        , result = map[parseInt(outbound)] + map[parseInt(returnFlight)]
    alert("The Cost of your journey will be about: " + result + "€")
}

这可能符合您的要求。该代码尚未经过测试。如有错误，请评论。

注意：如果您收到 NaN，可能是因为您将 value="" 替换为文字 value="<id-value>"。我的意思是您需要使用您已经用于 id="".

的值

我的意思是这样的：

<!doctype html>
<!-- Written by Igor Stefanovic -->
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Formular eigenes Beispiel 4.7</title>
        <style> body {background: url(bIecaU.jpg) no-repeat scroll ; display: flex; background-size: cover;background-color: rgba(0,0,0,0);}
                select {border-color: aqua; background-color: rgba(0,0,0,0); font-family: Arial; color: aqua; display: flex;}
                input {border-color: aqua; background-color: rgba(0,0,0,0); font-family: Arial; color: aqua; display: flex;}
                checkbox {border-color: aqua; background-color: rgba(0,0,0,0); font-family: Arial; color: aqua; display: flex;}
                textarea {border-color: aqua; background-color: rgba(0,0,0,0); font-family: Arial; color: aqua; display: flex;}
                h3 {display: flex;}
                p {display: flex;}
        
        @media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

        </style>
        <script>
            function change(object) {
                document.f.control.value = object.name + ", " + object.value + ", Content new";
                let outbound = document.getElementById('outbound').value
                    , returnFlight = document.getElementById('return').value
                    , map = [0, 150, 200, 250, 300, 350]
                    , result = map[parseInt(outbound)] + map[parseInt(returnFlight)]
                alert("The Cost of your journey will be about: " + result + "€")
            }

            function turning(object) {
                document.f.control.value = object.name + ", " + object.value + ", Content changed";
            }

            function marked(object) {
                if (object.checked) {
                    document.getElementsByClassName("returnflight")[0].style.visibility = "hidden";
                    document.getElementsByClassName("dateofreturn")[0].style.visibility = "hidden";
                    document.f.control.value = object.name + ", " + object.value + " marked.";
                } else {
                    document.getElementsByClassName("returnflight")[0].style.visibility = "unset";
                    document.getElementsByClassName("dateofreturn")[0].style.visibility = "unset";
                    document.f.control.value = object.name + ", " + object.value + " not marked.";
                }
            }

            function send() {
                return confirm("Do you want to send the form?");
            }
 
            function abort() {
                return confirm("Do you want to reset the form?");
            }

            function calculate(object) {
            }
        </script>
        Form written by Igor Stefanovic<br><br>
    </head>
    <body>
        <form name="f" method="post" action="event_form_eigbsp.php" onsubmit="return send();" onreset="return abort();">
            <input name="mrmrs"     type="radio" value="Mr." onclick="change(this);" checked="checked"> Mr.
            <input name="mrmrs"    type="radio" value="Mrs" onclick="change(this);"> Mrs.<br>
            <input name="name"    value="Name" size="20" onchange="change(this);"> Name <br>
            <input name="surname"   value="Surname" size="20" onkeyup="turn(this);"> Surname<br>
            <input name="street"    value="Street" size="20"  onkeyup="turn(this);"> Street <input name="nr" value=" " size="3" onchange="change(this);"> Nr.<br>
            <input name="city"    value="City"   size="20" onchange="change(this);"> City<br>
            <input name="postalcode" type="number" value="Postal Code" size="6" onchange="change(this);"> Postal Code<br><br>
            <select name="land" onchange="change(this);">
                <option value="Switzerland" selected="selected">Switzerland</option><br>
                <option value="Germany">Germany</option>
                <option value="Austria">Austria</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="France">France</option>
                <option value="Italy">Italy</option>
                <option value="Portugal">Portugal</option>
                <option value="Spain">Spain</option>
                <option value="Ireland">Ireland</option>
                <option value="Iceland">Iceland</option>
                <option value="Netherlands">Netherlands</option>
                <option value="Belgium">Belgium</option>
                <option value="Luxembourgh">Luxembourgh</option>
                <option value="Denmark">Denmark</option>
                <option value="Finland">Finland</option>
                <option value="Sweden">Sweden</option>
                <option value="Norway">Norway</option>
                <option value="Poland">Poland</option>
                <option value="Russia">Russia</option>
                <option value="Ukraine">Ukraine</option>
                <option value="Romania">Romania</option>
                <option value="Hungary">Hungary</option>
                <option value="Czech Republic">Czech Republic</option>
                <option value="Slovakia">Slowakia</option>
                <option value="Slovenia">Slovenia</option>
                <option value="Croatia">Croatia</option>
                <option value="Bosnia & Herzegowina">Bosnia & Herzegovina</option>
                <option value="Serbia">Serbia</option>
                <option value="Montenegro">Montenegro</option>
                <option value="Albania">Albania</option>
                <option value="Bulgary">Bulgary</option>
                <option value="Turkey">Turkey</option>
                <option value="Israel">Israel</option>
                <option value="Belarus">Belarus</option>
                <option value="Latvia">Latvia</option>
                <option value="Lithuania">Lithuania</option>
                <option value="Estonia">Estonia</option>
                <option value="Moldova">Moldova</option>
                <option value="North Makedonia">North Makedonia</option>
                <option value="Greece">Greece</option>
                <option value="Gibraltar">Gibraltar</option>
                <option value="Malta">Malte</option>
                <option value="Monte Carlo">Monte Carlo</option>
                <option value="Liechtenstein">Liechtenstein</option>
                </select> Country of Residence<br><br>
            <input name="dateofbirth" type="date" value="Date of Birth" onkeypress="turn(this);">&nbsp;&nbsp; Date of Birth<br><br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input class="flight" name="flight" type="checkbox" value="Only One Way" onclick="marked(this);">&nbsp;&nbsp; Only One Way<br><br>Outbound Country&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Return Flight Country<br>
            <select id="outbound" class="outbound" name="outbound" onchange="change(this);">
                <option value="1" selected="selected">Switzerland</option>
                <option value="1">Germany</option>
                <option value="1">Austria</option>
                <option value="2">United Kingdom</option>
                <option value="1">France</option>
                <option value="1">Italy</option>
                <option value="2">Portugal</option>
                <option value="2">Spain</option>
                <option value="4">Ireland</option>
                <option value="5">Iceland</option>
                <option value="2">Netherlands</option>
                <option value="2">Belgium</option>
                <option value="1">Luxembourgh</option>
                <option value="2">Denmark</option>
                <option value="4">Finland</option>
                <option value="4">Sweden</option>
                <option value="4">Norway</option>
                <option value="2">Poland</option>
                <option value="4">Russia</option>
                <option value="4">Ukraine</option>
                <option value="4">Romania</option>
                <option value="2">Hungary</option>
                <option value="2">Czech Republic</option>
                <option value="1">Slowakia</option>
                <option value="1">Slovenia</option>
                <option value="2">Croatia</option>
                <option value="3">Bosnia & Herzegovina</option>
                <option value="3">Serbia</option>
                <option value="3">Montenegro</option>
                <option value="4">Albania</option>
                <option value="4">Bulgary</option>
                <option value="5">Turkey</option>
                <option value="5">Israel</option>
                <option value="4">Belarus</option>
                <option value="3">Latvia</option>
                <option value="3">Lithuania</option>
                <option value="2">Estonia</option>
                <option value="4">Moldova</option>
                <option value="4">North Makedonia</option>
                <option value="4">Greece</option>
                <option value="2">Gibraltar</option>
                <option value="2">Malte</option>
                <option value="2">Monte Carlo</option>
                <option value="1">Liechtenstein</option>
            </select>
            <select id="return" class="returnflight" name="returnflight" onchange="change(this);">
                <option value="1" selected="selected">Switzerland</option>
                <option value="1">Germany</option>
                <option value="1">Austria</option>
                <option value="2">United Kingdom</option>
                <option value="1">France</option>
                <option value="1">Italy</option>
                <option value="2">Portugal</option>
                <option value="2">Spain</option>
                <option value="4">Ireland</option>
                <option value="5">Iceland</option>
                <option value="2">Netherlands</option>
                <option value="2">Belgium</option>
                <option value="1">Luxembourgh</option>
                <option value="2">Denmark</option>
                <option value="4">Finland</option>
                <option value="4">Sweden</option>
                <option value="4">Norway</option>
                <option value="2">Poland</option>
                <option value="4">Russia</option>
                <option value="4">Ukraine</option>
                <option value="4">Romania</option>
                <option value="2">Hungary</option>
                <option value="2">Czech Republic</option>
                <option value="1">Slowakia</option>
                <option value="1">Slovenia</option>
                <option value="2">Croatia</option>
                <option value="3">Bosnia & Herzegovina</option>
                <option value="3">Serbia</option>
                <option value="3">Montenegro</option>
                <option value="4">Albania</option>
                <option value="4">Bulgary</option>
                <option value="5">Turkey</option>
                <option value="5">Israel</option>
                <option value="4">Belarus</option>
                <option value="3">Latvia</option>
                <option value="3">Lithuania</option>
                <option value="2">Estonia</option>
                <option value="4">Moldova</option>
                <option value="4">North Makedonia</option>
                <option value="4">Greece</option>
                <option value="2">Gibraltar</option>
                <option value="2">Malte</option>
                <option value="2">Monte Carlo</option>
                <option value="1">Liechtenstein</option>
            </select>
            <br><br>Date of Outbound&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Date of Return<br>
            <input class="dateofoutbound" name="dateofoutbound" type="date" onchange="turning(this);">&nbsp;&nbsp;&nbsp;<input class="dateofreturn" name="dateofreturn" type="date" onclick="turning(this);">
            <br><br>
            <textarea name="comment" rows="6" cols="20" type="text" value="comment" onchange="change(this);"></textarea>Comments<br><br>
            <input name="control" type="text" value="control" size="50" readonly="readonly"><br><br>
            <input type="submit" value="Send"><input type="reset" value="Reset">
        </form>
    </body>
</html>

我假设这就是你想要的？

以上解决方案有效。也许你没有尝试过？不管怎样，既然你提到你更新了代码，我就复制了新代码并改进了它，但是我错误地从@MisterJojo 的答案中复制了代码（我一开始没注意到还有另一个答案，我以为是 OP 更新了代码）。

总之，由于我改进了它，这里是：

<!DOCTYPE html>
<html>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Formular eigenes Beispiel 4.7</title>
    <style>
        * { box-sizing: border-box }
        form { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 14px }
        form fieldset { margin-top: 1em; width: 30.476em }
        form fieldset.flight { display: inline-block; width: 15em }
        form legend { font-style: oblique; padding: 0 1em }
        form label { display: block; float: left; margin: .3em 0 }
        form label.c1 span { padding: 0 2em 0 .2em }
        form label.c2 { clear: both }
        form label.c2 span { font-size: .9em; padding-right: .2em }
        form label.c2 input,
        form label.c2 select { display: block; clear: left }
        form div { display: block; float: left; margin-right: .5em }
        form div.c3 { clear: left }
        form fieldset textarea { width: 99.588% }
        form > input[name=control] { width: 32em }
    </style>
    <form name="reservation-form" action="event_form_eigbsp.php" method="POST">
       <fieldset>
          <legend>Civility</legend>
          <label class="c1">
          <input name="mrmrs" type="radio" value="Mr." checked>
          <span> Mr. </span> 
          </label>
          <label class="c1">
          <input name="mrmrs" type="radio" value="Mrs">
          <span> Mrs. </span> 
          </label>
          <label class="c2">
          <span> Name </span> 
          <input size="26" name="name" placeholder="your Name" required>
          </label>
          <label class="c2"> 
          <span> Surname </span> 
          <input size="26" name="surname" placeholder="Surname">
          </label>
          <div class="c3">
             <label class="c2">
             <span> Street </span> 
             <input size="26" name="street" placeholder="Street" required>
             </label>
          </div>
          <div>
             <label class="c2">
             <span> Nr. </span> 
             <input size="3" name="nr" required>
             </label>
          </div>
          <div class="c3">
             <label class="c2">
             <span> City </span> 
             <input size="26" name="city" placeholder="City" required>
             </label>
          </div>
          <div>
             <label class="c2">
             <span> ZIP </span> 
             <input size="6" name="postalcode" placeholder="Postal Code" required> 
             </label>
          </div>
          <label class="c2">
          <span> Country of Residence </span>
          <select id="land" name="land" ></select>
          </label>
          <label class="c2">
          <span> Date of Birth </span>
          <input name="dateofbirth" type="date" required>
          </label>
       </fieldset>
       <fieldset class="flight">
          <legend>outbound flight</legend>
          <label class="c1">
          <input name="flight" type="checkbox" value="Only One Way" checked>
          <span> Only One Way</span> <br><br>
          </label>
          <label class="c2"> 
          <span>Outbound Country</span>
          <select id="outbound" name="outbound"></select>
          </label>
          <label class="c2">
          <span>Date of Outbound </span>
          <input name="dateofoutbound" type="date" required>
          </label>
       </fieldset>
       <fieldset class="flight">
          <legend>return flight</legend>
          <label class="c2"> 
          <span>Return Flight Country</span>
          <select id="returnflight" name="returnflight" disabled></select>
          </label>
          <label class="c2">
          <span>Date of Return </span>
          <input name="dateofreturn" type="date" disabled required>
          </label>
       </fieldset>
       <fieldset>
          <legend>Comments</legend>
          <textarea name="comment" rows="6" placeholder="comment"></textarea>
       </fieldset>
       <br>
       <input name="control" type="text" size="46" readonly="readonly">
       <br>
       <br>
       <button type="submit">Send</button>
       <button type="reset">Reset</button>
    </form>
    <script>
        const countries = [
            [0, 'Austria']
            , [0, 'France']
            , [0, 'Germany']
            , [0, 'Italy']
            , [0, 'Liechtenstein']
            , [0, 'Luxembourgh']
            , [0, 'Slovakia']
            , [0, 'Slovenia']
            , [0, 'Switzerland']
            , [1, 'Belgium']
            , [1, 'Croatia']
            , [1, 'Czech Republic']
            , [1, 'Denmark']
            , [1, 'Estonia']
            , [1, 'Gibraltar']
            , [1, 'Hungary']
            , [1, 'Malte']
            , [1, 'Monte Carlo']
            , [1, 'Netherlands']
            , [1, 'Poland']
            , [1, 'Portugal']
            , [1, 'Spain']
            , [1, 'United Kingdom']
            , [2, 'Bosnia & Herzegovina']
            , [2, 'Latvia']
            , [2, 'Lithuania']
            , [2, 'Montenegro']
            , [2, 'Serbia']
            , [3, 'Albania']
            , [3, 'Belarus']
            , [3, 'Bulgary']
            , [3, 'Finland']
            , [3, 'Greece']
            , [3, 'Ireland']
            , [3, 'Moldova']
            , [3, 'North Makedonia']
            , [3, 'Norway']
            , [3, 'Romania']
            , [3, 'Russia']
            , [3, 'Sweden']
            , [3, 'Ukraine']
            , [4, 'Iceland']
            , [4, 'Israel']
            , [4, 'Turkey']
        ]

        const
            reservForm = document.forms['reservation-form']
            , costs = [150, 200, 250, 300, 350]
            , cost = e => {
                let cost = costs[reservForm.outbound.value] + (reservForm.flight.checked ? 0 : costs[reservForm.returnflight.value])
                    , lib = reservForm.outbound[reservForm.outbound.selectedIndex].textContent
                    , ret = reservForm.flight.checked ? '' : ', (' + reservForm.returnflight[reservForm.returnflight.selectedIndex].textContent + ')'
                reservForm.control.value = `The Cost of your journey will be about: ${cost} € -- (${lib})${ret}`
            }
        countries.sort( (a, b) => {
            if (a[1] < b[1])
                return -1
            if (a[1] > b[1])
                return 1
            return 0
        } )
        countries.forEach(c => {
            reservForm.land.add(new Option(c[1], c[1]))
            reservForm.outbound.add(new Option(c[1], c[0]))
            reservForm.returnflight.add(new Option(c[1], c[0]))
        })
        reservForm.addEventListener( 'submit', e => {
            if (!confirm("Do you want to send the form?")) e.preventDefault()
        } )
        reservForm.addEventListener( 'reset', e => {
            if (!confirm("Do you want to reset the form?")) e.preventDefault()
        } )

        reservForm.flight.addEventListener( 'input', e => {
            reservForm.returnflight.disabled = reservForm.flight.checked
            reservForm.dateofreturn.disabled = reservForm.flight.checked
            reservForm.dateofreturn.required = reservForm.flight.checked
            cost()
        } )

        reservForm.outbound.addEventListener( 'change', cost )
        reservForm.returnflight.addEventListener( 'change', cost )
        cost()
    </script>

Answer 2

HTML5表格处理方式：

PS； JS代码必须放在</body>标签之前。
否则在脚本
上使用 defer 属性或 DOMContentLoaded 事件。

const countries =
  [ { cod: 0, lib:'Switzerland'    }, { cod: 0, lib:'Germany'        }, { cod: 0, lib:'Austria'              }
  , { cod: 1, lib:'United Kingdom' }, { cod: 0, lib:'France'         }, { cod: 0, lib:'Italy'                }
  , { cod: 1, lib:'Portugal'       }, { cod: 1, lib:'Spain'          }, { cod: 3, lib:'Ireland'              }
  , { cod: 4, lib:'Iceland'        }, { cod: 1, lib:'Netherlands'    }, { cod: 1, lib:'Belgium'              }
  , { cod: 0, lib:'Luxembourgh'    }, { cod: 1, lib:'Denmark'        }, { cod: 3, lib:'Finland'              }
  , { cod: 3, lib:'Sweden'         }, { cod: 3, lib:'Norway'         }, { cod: 1, lib:'Poland'               }
  , { cod: 3, lib:'Russia'         }, { cod: 3, lib:'Ukraine'        }, { cod: 3, lib:'Romania'              }
  , { cod: 1, lib:'Hungary'        }, { cod: 1, lib:'Czech Republic' }, { cod: 0, lib:'Slovakia'             }
  , { cod: 0, lib:'Slovenia'       }, { cod: 1, lib:'Croatia'        }, { cod: 2, lib:'Bosnia & Herzegovina' }
  , { cod: 2, lib:'Serbia'         }, { cod: 2, lib:'Montenegro'     }, { cod: 3, lib:'Albania'              }
  , { cod: 3, lib:'Bulgary'        }, { cod: 4, lib:'Turkey'         }, { cod: 4, lib:'Israel'               }
  , { cod: 3, lib:'Belarus'        }, { cod: 2, lib:'Latvia'         }, { cod: 2, lib:'Lithuania'            }
  , { cod: 1, lib:'Estonia'        }, { cod: 3, lib:'Moldova'        }, { cod: 3, lib:'North Makedonia'      }
  , { cod: 3, lib:'Greece'         }, { cod: 1, lib:'Gibraltar'      }, { cod: 1, lib:'Malte'                }
  , { cod: 1, lib:'Monte Carlo'    }, { cod: 0, lib:'Liechtenstein'  }  ]

const 
  reservForm = document.forms['reservation-form']
  costs      =  [ 150 , 200 , 250, 300 , 350 ]
  ;
countries.forEach(c=>
  {
  reservForm.land.add (new Option( c.lib, c.lib ) )
  reservForm.outbound.add (new Option( c.lib, c.cod ) )
  reservForm.returnflight.add (new Option( c.lib, c.cod ) ) 
  })
reservForm.onsubmit = e =>
  {
  if (!confirm("Do you want to send the form?")) e.preventDefault()
  }
reservForm.onreset = e =>
  {
  if (!confirm("Do you want to reset the form?")) e.preventDefault()
  } 

reservForm.flight.oninput = () =>
  {
  reservForm.returnflight.disabled = reservForm.flight.checked
  reservForm.dateofreturn.disabled = reservForm.flight.checked
  reservForm.dateofreturn.required = reservForm.flight.checked
  } 
reservForm.outbound.onchange = () =>
  {
  let cost = costs[reservForm.outbound.value]
    , lib  = reservForm.outbound[reservForm.outbound.selectedIndex].textContent
    ;
  reservForm.control.value = `The Cost of your journey will be about: ${cost} € -- (${lib})`
  }

form {
  font-family : 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size   : 14px;
  }
form fieldset { 
  margin-top: 1em;
  width : 28.3em;
  }
form fieldset.flight { 
  display: inline-block;
  width : 13em;
  }
form legend { 
  font-style : oblique;
  padding    : 0 1em;
  }
form label { 
  display : block;
  float   : left;
  margin  : .3em 0;
  }
form label.c1 span { 
  padding : 0 2em 0 .2em;
  }
form label.c2 { 
  clear   : both;
  }
form label.c2  span { 
  font-size     : .9em;
  padding-right : .2em;
  }
form label.c2  input,
form label.c2  select { 
  display: block;
  clear: left;
  }
form div {
  display : block;
  float   : left;
  margin-right : .5em;
}
form div.c3 {
  clear  :  left;
}
form fieldset textarea{ 
  width : 96%;
  }

<form name="reservation-form" method="post" action="event_form_eigbsp.php" >
  <fieldset>
    <legend>Civility</legend>
    <label class="c1">
      <input name="mrmrs" type="radio" value="Mr." checked >
      <span> Mr.  </span> 
    </label>
    <label class="c1">
      <input name="mrmrs" type="radio" value="Mrs">
      <span> Mrs. </span> 
    </label>
    <label class="c2">
      <span> Name </span> 
      <input size="26" name="name" placeholder="your Name" required>  
    </label>
    <label class="c2"> 
      <span> Surname </span> 
      <input size="26" name="surname"  placeholder="Surname">
    </label>
    <div class="c3">
      <label class="c2">
        <span> Street  </span> 
        <input size="26" name="street" placeholder="Street"  required>      
    </label>
    </div>
    <div>
      <label class="c2">
        <span> Nr. </span> 
        <input size="3"  name="nr"  required >
      </label>
    </div>
    <div class="c3">
      <label class="c2">
        <span> City    </span> 
        <input size="26" name="city" placeholder="City"  required>
      </label>
    </div>
    <div>
      <label class="c2">
        <span> ZIP     </span> 
        <input size="6"  name="postalcode" placeholder="Postal Code"  required> 
      </label>
    </div>
    <label class="c2">
      <span> Country of Residence </span>
      <select name="land" ></select>
    </label>
    <label class="c2">
      <span> Date of Birth </span>
      <input name="dateofbirth" type="date" required>
    </label>
  </fieldset> 

  <fieldset class="flight">
    <legend>outbound flight</legend>
    <label class="c1">
      <input name="flight" type="checkbox" value="Only One Way" checked >
      <span> Only One Way</span> <br><br>
    </label>
    <label class="c2"> 
      <span>Outbound Country</span>
      <select name="outbound"></select>
    </label>
    <label class="c2">
      <span>Date of Outbound </span>
      <input name="dateofoutbound" type="date" required>
    </label>
  </fieldset>
  <fieldset class="flight">
    <legend>return flight</legend>
    <label class="c2"> 
      <span>Return Flight Country</span>
      <select name="returnflight" disabled></select>
    </label>
    <label class="c2">
      <span>Date of Return </span>
      <input name="dateofreturn" type="date" disabled required>
    </label>
  </fieldset>
  <fieldset>
    <legend>Comments</legend>
    <textarea name="comment" rows="6"  placeholder="comment" ></textarea>
  </fieldset>
  <br>
  <input name="control" type="text" value="control" size="46" readonly="readonly"><br><br>
  <button type="submit">Send</button>
  <button type="reset">Reset</button>
</form>

javascript，html中select框中的始发地和目的地发生变化时，如何计算航班费用？

How to calculate with javascript, flight costs when origin and destination changes in select box in html?

javascript

html

mathematical-optimization