立即从选择框获取值

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

现在，我要执行的操作是使标签立即显示相应的价格，而不必始终单击提交。 这意味着当我单击选择框中的某个项目时，我希望标签产生该项目的价格。

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

Answer 1

您不能使用PHP来做到这一点，它并非旨在执行您要执行的操作，您可以使用AJAX在后台执行请求，但是您表示不想一直都单击提交，这样离开JQuery或JavaScript。 如果您没有使用太多JavaScript，那么我暂时不建议使用JQuery，并学习JavaScript的基础知识。 您会惊讶于您之后很快地使用JQuery和AJAX。 使用JavaScript立即将一个值传递到页面上另一个位置的快速方法是在函数中的循环中使用sudo数据列表和变量，您可以调用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