Question

我对Javascript很新，（前几天）......

我创建一个航空公司预订表格，并希望根据乘客所选择的等级显示座位间距价格。

我不确定如何从依赖下拉脚本中检索值，这样我就可以创建一个数组来将所选值与价格相关联。继承我的剧本......

<script language="javascript" type="text/javascript">

function dropdownlist(listindex)
{
    document.flightform.pitch.options.length = 0;
    switch (listindex)
    {
        case "Economy":
            document.flightform.pitch.options[0]=new Option("28","28");
            document.flightform.pitch.options[1]=new Option("29","29");
            break;
        case "Biz":
            document.flightform.pitch.options[0]=new Option("30","");
            document.flightform.pitch.options[1]=new Option("32","");
            break;
        case "First":
            document.flightform.pitch.options[0]=new Option("40","");
            break;
    }
    return true;
}
var Seat_pitch= new Array ();

Seat_pitch["28"] = 400;
//etc.....
//etc.....

function getSeatpitch()
{
    var Seatpitch=0;
    var theForm = document.forms["flightform"];
    var selectedpitch = theForm.elements["pitch"];

    Seatpitch = Seat_pitch[selectedpitch.value];

    return Seatpitch;
}

function calcTotal()
{
    var Total = getSeatpitch()  ;

    //display the result
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Your flight Total is &pound;"+Total;
}

</script>

<htmL>
<body>
    <label>Class type</label><br />
    <select id="class"  name='class' onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">

        <option value="Economy">Economy</option>
        <option value="Biz">Business</option>
        <option value="First">First</option>
    </select>
    <br/><br/>
    <script type="text/javascript" language="JavaScript">
        document.write('<select name="pitch" id="pitch"></select>')
    </script>
    <div id="totalPrice"></div>

</html>
</body>

Answer 1

您的html中没有名为“flightform”的表单，但您在javascript中引用了此表单。

事实上你的标签有点歪斜，按照这样重新排序：

<html>
<script>
...
</script>
<body>
<form name="flightform">
...
</form>
</body>
</html>

然后，您应该可以通过调用getSeatpitch函数来获取价格。

Answer 2

你不觉得使用jQuery框架吗？有很多有用的东西，所以你不需要开发自己的自行车。例如，您可以将代码重写为：

<html>
    <head>
        <!-- Connect jQuery from Google library storage -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <!-- Create select for class, with id #class -->
        <select id="class" name="class">
            <option value="0">Econom</option>
            <option value="1">Business</option>
            <option value="2">First</option>
        </select>
        <!-- Create select for place, with id #place -->
        <select id="place" name="place" disabled="disabled"></select>
        <!-- Create view place for price, with id #price -->
        <span id="price"></span>
        <script type="text/javascript">
            // available places to choose 
            var available = {
                0:      {
                    25: 50
                },
                1:      {
                    26: 100
                },
                2:      {
                    21: 200,
                },
            }

            // When the document is totally loaded, do that things that's defined in function(e) {}
            $(document).ready(function(e){
                // Bind trigger for class select changing, where $('select#class') - find element that in DOM select inputs and has id="class"
                // When it change, call function(e) {}, inside this function $(this) will be the select itself
                $('select#class').live('change', function(e){
                    // find place select input
                    var place = $('select#place');
                    // if it's disabled, unblock it, and clean all options inside
                    place.removeAttr('disabled').find('option').remove();
                    // foreach places in available create option and put it into place select
                    for (var i in available[$(this).val()]) {
                        place.append($('<option />').val(i).html(i));
                    }
                    // behave like place select have changed, and trigger listener above
                    place.change();
                });

                $('select#place').live('change', function(e){
                    $('span#price').html(available[$('select#class').val()][$(this).val()]);
                });
            });
        </script>
    </body>
</html>

完全有效的例子。不知怎的那样......强烈建议你不要使用原始的JavaScript。

Answer 3

您的代码中似乎错过了对calcTotal的调用。

您可以在onchange的{{1}}事件中调用它，例如

<select name="pitch">

在this fiddle中查看。

我不明白为什么这个<script type="text/javascript" language="JavaScript"> document.write('<select name="pitch" id="pitch" onchange="calcTotal();"></select>') </script>是通过<select>写的。

我建议您在document.write的{{1}}事件监听器中调用calcTotal()，以便在更改类（以及音调）时更新总数。请务必在页面加载时调用<select name="class">和onchange（例如，使用dropdownlist()），因为您将预先选择第一个值。

或者甚至更好，为两个下拉列表提供空白值，并在calcTotal()中检查它们，以便在没有选择类的情况下清除显示总数的文本。

此外，关于如何从<body onload="calcTotal()">获取值的原始问题，您只需访问元素的calcTotal属性而不是<select>。

PD 我已经更新了小提琴以提供空白选项，并在没有选择正确选项的情况下清除总显示。

为从属下拉列表选项提供值以创建函数

3 个答案: