0

我制作了一个网页，其中下拉选择框有 5 种不同的会员类型。所有会员都有不同的价格（显然）。

在我再说什么之前，这是代码：

$form = new jqmForm('RegForm');
$form->method('post');
$membsel = $form->add(new jqmSelect('membership','membership','Select Membership:'), true);
$membsel->add(new jqmOption('Sailing Junior - under 19 years old on 12 October', 'sailJunior', false));
$membsel->add(new jqmOption('Junior Family Membership - See notes', 'juniorFamily', false));
$membsel->add(new jqmOption('Sailing Senior - over 19 years old on 12 October', 'sailSenior', false));
$membsel->add(new jqmOption('Senior Family Membership - See notes', 'seniorFamily', false));
$membsel->add(new jqmOption('Non Sailing Members - all ages', 'nonSailing', false));
if ($_POST['sailJunior']){
    $form->add(new jqmLabel('itemFee', '<h3 align=center>$100</h3>'));
}
else if ($_POST['juniorFamily']){
    $form->add(new jqmLabel('itemFee', '<h3 align=center>$185</h3>'));
}
else if ($_POST['sailSenior']){
    $form->add(new jqmLabel('itemFee', '<h3 align=center>$255</h3>'));
}
else if ($_POST['seniorFamily']){
    $form->add(new jqmLabel('itemFee', '<h3 align=center>$395</h3>'));
}
else if ($_POST['nonSailing']){
    $form->add(new jqmLabel('itemFee', '<h3 align=center>$20</h3>'));
}
$form->add(new jqmInput('quantity', 'quantity', 'integer', '', 'Quantity', 'c', true));
$form->add(new jqmLabel('totalFee', '<h3 align=center>0</h3>', ''));
$form->add(new jqmInput('submit', 'submit', 'submit', 'submit', '', 'b', true));

现在，我要做的是让标签立即显示相应的价格，而不必一直点击提交。这意味着当我在选择框中单击一个项目时，我希望标签产生该项目的价格。

我该怎么做呢？任何和所有的帮助都会很棒。对于那些不知道为什么我的代码看起来很奇怪的人来说，这是因为我使用的是 jqmPhp。

4

2 回答 2

1

您不能使用 PHP 来执行此操作，它不是为您所追求的而设计的，您可以使用 AJAX 在后台执行请求，但您说您不想一直点击提交，这样离开 JQuery 或 JavaScript。如果您没有使用太多 JavaScript，那么我建议您暂时不要使用 JQuery，并学习 JavaScript 的基础知识。之后您会惊讶地发现自己学习 JQuery 和 AJAX 的速度有多快。使用 JavaScript 立即将一个值获取到页面上另一个位置的一种快速方法是在一个函数的循环中使用 sudo datalist 和变量，您可以在 onChange 事件上调用该函数。像这样的东西：

<style>
#hidden {
    display:none;
}
</style>

<select onChange='price(this.options[this.selectedIndex].id)'>
    <option>Select an Option</option>
    <option id='optionId[1]' >Product 1</option>
    <option id='optionId[2]' >Product 2</option>
    <option id='optionId[3]' >Product 3</option>
    <option id='optionId[4]' >Product 4</option>
</select>
<div id='hidden'>
    <p id='hiddenId[1]'>100</p>
    <p id='hiddenId[2]'>200</p>
    <p id='hiddenId[3]'>300</p>
    <p id='hiddenId[4]'>400</p>
</div>
<p id='preview'></p>

function price(get_id) {
    i = 1;
    var priceValue = '';
    var optionId = new Array();
    var hiddenId = new Array();
    while (i <= 4) {
        optionId[i] = 'optionId['+i+']';
        hiddenId[i] = 'hiddenId['+i+']';
        if (get_id == optionId[i]) {
            priceValue = document.getElementById(hiddenId[i]).innerHTML;
            document.getElementById('preview').innerHTML = priceValue;
        }
        i++;
    }
}
于 2013-09-19T01:57:54.560 回答
0

你可以找到很多“链式选择”的例子

而不是在另一个选择中填充它，您可以按照自己的方式进行操作..

http://tutorialzine.com/2011/11/chained-ajax-selects-jquery/

http://www.9lessons.info/2010/08/dynamic-dependent-select-box-using.html

于 2013-09-19T00:05:39.020 回答