使用$\u POST[]调整JavaScript开关

因此，首先，我之前没有任何Javascript经验，因此，我一直在努力解决像这样的基本问题。我很确定有答案，但由于英语不是我的第一语言，我似乎找不到答案

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

您可以在选择表单中选择首选价格列

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

经过几天的代码检查，我几乎不能理解，我在这里的绳索末端。如果有人能在这里帮助我，甚至可以用一种连我都能理解的方式来解释，那就太好了

---

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

您可以从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>

0 - 100
101 - 500
501 - 1000
1001 - 10000
> 10000
函数getData（val）
{
$.ajax({
url:“getTableData.php？tcktid=“+val，
cache:false，
成功：功能（数据）{
警报（数据）；//您可以按自己的方式使用它
}
});
}

在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;
?>

---

实现您的目标有多种方法

异步调用
使用async request，在加载页面并由用户选择票证数量后，您将调用Your's back-end（php）

为此，您必须有2条路由，一条用于服务页面，另一条用于处理异步调用并仅以price响应（通常为json格式）

例：
-www.expl.com/tickets=>将以html页面响应
-www.expl.com/api/tickets=>将以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
    });
})

谷歌

ajax请求

（不是荷兰足球队），或者阅读

将所有价格输入到您的html中
如果您使用的是一小部分数据，这不会延迟您的响应，那么您可以在使用php渲染时将价格直接放入html（js数组）中。

---

两个示例的html

0 - 100
101 - 500
501 - 1000
1001 - 10000
> 10000
//价格占位符

您正在编写PHP代码，但正在寻找JavaScript解决方案？目前的最佳做法是省略结束PHP标记：

？>

为什么它如此@cale_b？

$('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
    });
})

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

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