Question

我创建了一个网页，其中下拉选择框有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));

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

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

Answer 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++;
    }
}

Answer 2

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

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

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

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

立即从选择框中获取值

2 个答案: