Question

首先，我没有任何先前的Javascript经验，因此我为什么会像这样基本的东西。我很确定那里有答案，但由于英语不是我的第一语言，我似乎找不到它。

我正在网站上工作，多个票务公司的关税显示在一个表格中，从数据库调用。这些关税根据订购的门票数量而变化，因此我制作了5个不同的价格栏，如下图所示： Database screenshot

您可以在表单选择

中选择首选价格列

<select id="aantal_tickets" name="aantal_tickets">
    <option value="1" selected="selected">0 - 100</option>
    <option value="2">101 - 500</option>
    <option value="3">501 - 1000</option>
    <option value="4">1001 - 10000</option>
    <option value="5">> 10000</option>
</select>

我的意图是显示的价格列与所选的下拉选项匹配。因此，如果我选择第一个选项，则会显示第一个价格列。如果我选择第二个选项，则会显示第二列等。

我尝试使用这样的开关，但实际上并没有到达任何地方;

switch($_POST['aantal_tickets']) {
    case "1":
    $abc = option1;
    break;

    case "2":
    $abc = option2;
    break;

    case "1":
    $abc = option3;
    break;

    case "1":
    $abc = option4;
    break;

    case "1":
    $abc = option5;
    break;
}

经过几天查看代码后，我几乎无法理解，我在这里结束了。如果有人可以帮助我在这里，甚至可能以我能理解的方式解释它，那就太好了。

另外，我知道这可以在没有JavaScript的情况下完成，但它需要实时完成，所以通过一个函数。

Answer 1

您可以从HTML页面进行ajax调用，以便从表中获取数据，如下所示：在HTML中，您需要为下拉列表编辑onchange事件，以便每次更改所选值时它都会获取数据：

<select id="aantal_tickets" name="aantal_tickets" onchange="getData(this.value)">
        <option value="1" selected="selected">0 - 100</option>
        <option value="2">101 - 500</option>
        <option value="3">501 - 1000</option>
        <option value="4">1001 - 10000</option>
        <option value="5">> 10000</option>
    </select> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>
    function getData(val)
    {
             $.ajax({
              url: "getTableData.php?tcktid="+val,
              cache: false,
              success: function(data){
                alert(data); //You can use it your own way
              }
            });
    }
        </script>

在getTableData.php中，只返回如下结果：

<?php 
//Your connection code.
//Your select query to populate values of option1,option2....option5 (as you said)
switch($_GET['tcktid']) {
    case "1":
    $abc = option1;
    break;

    case "2":
    $abc = option2;
    break;

    case "1":
    $abc = option3;
    break;

    case "1":
    $abc = option4;
    break;

    case "1":
    $abc = option5;
    break;
} 
echo $abc;
?>

Answer 2

实现您的目标有多种方法。

异步通话
使用异步请求，您将在加载页面并且用户选择票证数量后呼叫您“后端（php）”。

为此你必须有2条路线，一条用于服务页面，另一条用于处理异步调用，仅响应价格（通常采用json格式）

例如：
- www.expl.com/tickets =＆gt;将以html页面回复
- www.expl.com/api/tickets =＆gt;将以x票的价格作出回应（x必须与GET或POST var

一起传递

$('select').on('change', function() {
  $.ajax({
      method: "POST",
      url: "some.php",
      data: {
        category: this.value
      }
    })
    .done(function(msg) {
      $('#prijs').html( msg.price ); // msg is your json object returned from back-end
    });
})

Google ajax request（不是荷兰足球队），或阅读JQuery docs

将所有价格放入您的HTML
如果您处理小数据集，这不会延迟您的响应，您可以将价格直接放在您的html（js数组）中，同时使用php呈现它。 example

var prijzen = [5,4,3,2,1]; // part to be filed with php while rendering html

$('select').on('change', function() { // yes, i'm using JQuery
  $('#prijs').html( prijzen[this.value - 1] ); // -1 because an array starts with 0
})

两个例子的

html

<select id="aantal_tickets" name="aantal_tickets">
  <option value="1" selected="selected">0 - 100</option>
  <option value="2">101 - 500</option>
  <option value="3">501 - 1000</option>
  <option value="4">1001 - 10000</option>
  <option value="5">> 10000</option>
</select>

<div id="prijs">
  // placeholder for price
</div>

使用$ _POST []

2 个答案: