为依赖下拉列表选项提供一个值以创建函数

Giving a dependent drop-down list option a value to create a function

本文关键字：一个 函数 创建 下拉列表 依赖 选项      更新时间：2023-09-26

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

您的html中没有一个名为"flightform"的表单，但您在javascript中引用了它。

事实上，你的标签有点歪斜wiff，像这样重新订购：

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

然后，您应该能够通过调用getSeatpatch函数来获得价格。

代码中似乎缺少对calcTotal的调用。

您可以在<select name="pitch">的onchange事件中调用它，就像一样

<script type="text/javascript" language="JavaScript">
    document.write('<select name="pitch" id="pitch" onchange="calcTotal();"></select>')
</script>

看看这把小提琴。

我不明白为什么这个<select>是用document.write写的。

我还建议在<select name="class">的onchange事件侦听器中调用calcTotal()，以便在更改类（因此更改音高）时更新总数。请记住，在页面加载时也要调用dropdownlist()和calcTotal()（例如，使用<body onload="calcTotal()">），因为您将预先选择第一个值。

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

此外，关于如何从<select>中获取值的原始问题，您可以只访问元素的value属性，而不是options[selectedIndex].value]。

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

您不认为要使用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。

相关文章：