基于下拉选择的动态页面答案

【问题标题】：Dynamic Page Based On Dropdown Selection基于下拉选择的动态页面
【发布时间】：2014-08-16 18:40:35
【问题描述】：

我正在开发一个注册系统。不同的会员类型有不同的价格。助理是 25 美元，家庭是 40 美元，普通是 35 美元，普通家庭是 40 美元，荣誉是 0 美元，机构是 25 美元。我需要一个下拉菜单，它会根据所选的会员资格更改应付金额。

我现在的代码：

<p>Current Status: 
<select name="status_current">
<option value="">Please Select</option>
<option value="A">Associate</option>
    <option value="F">Family</option>
<option value="R">Regular</option>
<option value="RF">Regular Family</option>
<option value="H">Honary</option>
<option value="I">Institutional</option>
</select>
</p>

【问题讨论】：

标签： jquery html dynamic drop-down-menu

【解决方案1】：

首先，在你的页面中包含 jQuery，就像这样：

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

然后我会像这样使用 jQuery：

$('#dropDownId').val();

或者获取当前选中的文本：

$('#dropDownId :selected').text();

然后我会创建一个在用户更改选项时运行的函数。

<p>Current Status: <select id="dropDownId" name="status_current" onchange=YourFunction()> 
<option value="">Please Select</option> <option value="A">Associate</option>
<option value="F">Family</option> <option value="R">Regular</option>
<option value="RF">Regular Family</option> <option
value="H">Honary</option> <option value="I">Institutional</option>
</select></p>

那么你的 Javascript 函数可能是这样的：

<script type="text/javascript">

function YourFunction(){
    if($('#dropDownId').val()=="A"){
        $("#Div_to_show_the_price").html("25$");
    }
    else if($('#dropDownId').val()=="F"){
        $("#Div_to_show_the_price").html("40$");
    }
}
</script>
<div id="Div_to_show_the_price"></div>

其他选项依此类推。

【讨论】：

我是 javascript 的菜鸟，你会如何显示 javascript 的结果？
它已经显示了该部分的结果：$("#Div_to_show_the_price").html("40$"); -----它将“40$”放入ID为：#Div_to_show_the_price的div中
这对我不起作用。有什么办法吗，比如 document.write？
我编辑了我的答案，向您解释如何在您的页面中包含 jQuery。如果可行，请将我的回答视为有用。谢谢，希望能帮到你
在您提供给我的链接上，您的代码中有两个。只保留第一个和最后一个

【解决方案2】：

您需要使用 javascript 或者最好使用 jQuery，因为 php 是一个服务器端进程。对于动态页面，您必须取悦客户端。

jQuery 是一个非常容易上手的东西，所以就开始吧。这是jquery中的代码

    //when select triggers change, and if family is selected 
    //change the price display
    //or do something else, whatever you want 
$("#my-select').on('change',function(){
    if($(this).val() == "Family")
        $("#price-display").html('35');
});

【讨论】：

【解决方案3】：

试试这个：

HTML：

<p>Current Status:
    <select id="dropdown" name="status_current" onchange="CheckVal();">
        <option value="">Please Select</option>
        <option value="A">Associate</option>
        <option value="F">Family</option>
        <option value="R">Regular</option>
        <option value="RF">Regular Family</option>
        <option value="H">Honary</option>
        <option value="I">Institutional</option>
    </select>
</p>
<div id="show"></div>

JS：

function CheckVal() {
    var val = $('#dropdown').val();
    if (val == "A") {
        $("#show").html("25$");
    } else if (val == "F") {
        $("#show").html("40$");
    }
    else if (val == "R") {
        $("#show").html("35$");
    }
    else if (val == "RF") {
        $("#show").html("40$");
    }
    else if (val == "H") {
        $("#show").html("0$");
    }
    else if (val == "I") {
        $("#show").html("25$");
    }
}

JSFiddle：

http://jsfiddle.net/TZL3p/

【讨论】：

【解决方案4】：

您可以向option 添加一个可以包含金额的属性。

JSFiddle：

http://jsfiddle.net/TZL3p/1/

【讨论】：

那究竟是什么属性？
您可以使用自己的属性。在我的示例中，我使用了“金额”