Question

我正在研究注册系统。不同的会员类型有不同的价格。员工25美元，家庭40美元，普通家庭35美元，普通家庭40美元，Honary 0美元，机构25美元。我需要一个下拉菜单，根据所选的成员资格更改Amount Due。

我的代码现在：

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

Answer 1

你需要使用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');
});

Answer 2

首先，在页面中包含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>

等等其他选项。

Answer 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/

Answer 4

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

的jsfiddle：

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

基于下拉选择的动态页面

4 个答案: