如何实现联动下拉框选择后通过短代码显示车辆图片与参数表格

需求说明 #

• 现有两个联动下拉选择框，第二个下拉选项依赖第一个的选择，当前选择第二个下拉后仅显示文本，需改为展示对应车辆的图片+参数表格。
• 具体要求：
  1. 选择车型后，通过关联的短代码（[table id=ID /] + [RH ELEMENTOR id="ID"] 或 [RH post id="ID"]）展示对应内容，替换原文本显示。
  2. 选择第一个默认选项（-- Car --）时，隐藏表格内容。

现有代码 #

<select id="car" onchange="ChangeCarList()"> 
  <option value="select">-- Car --</option> 
  <option value="VO">VOLVO</option> 
  <option value="VW">Volkswagen</option> 
  <option value="BMW">BMW</option> 
</select> 

<select id="carmodel" onchange="myFunction()">
<option value=""> - Select car model - </option> 
</select> 

<p id="demo">&nbsp;</p>
<p id="secondP"></p>
<script>
var carsAndModels = {};
carsAndModels['select'] = ['-- carmodel --'];
carsAndModels['VO'] = ['','V70', 'XC60', 'XC90'];
carsAndModels['VW'] = ['','Golf', 'Polo', 'Scirocco', 'Touareg'];
carsAndModels['BMW'] = ['','M6', 'X5', 'Z3'];

function ChangeCarList() {
  var carList = document.getElementById("car");
  var modelList = document.getElementById("carmodel");
  var selCar = carList.options[carList.selectedIndex].value;
  while (modelList.options.length) {
    modelList.remove(0);
  }
  var cars = carsAndModels[selCar];
  if (cars) {
    var i;
    for (i = 0; i < cars.length; i++) {
      var car = new Option(cars[i], i);
      modelList.options.add(car);
    }
  }
} 
</script>

<script>
function myFunction() {
  var x = document.getElementById("carmodel");
  var i = x.selectedIndex;
  document.getElementById("demo").innerHTML = x.options[i].text;
}
</script>

改造后的完整代码 #

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

<select id="car" onchange="ChangeCarList()"> 
  <option value="select">-- Car --</option> 
  <option value="VO">VOLVO</option> 
  <option value="VW">Volkswagen</option> 
  <option value="BMW">BMW</option> 
</select> 

<select id="carmodel" onchange="myFunction()">
<option value=""> - Select car model - </option> 
</select> 

<div id="demo"></div>
<p id="secondP"></p>

<script>
// 重构数据结构，关联车型名称与对应短代码
var carsAndModels = {
  'select': [{name: '-- carmodel --', code: ''}],
  'VO': [
    {name: '', code: ''},
    {name: 'V70', code: '[table id=1 /][RH ELEMENTOR id="101"]'},
    {name: 'XC60', code: '[table id=2 /][RH post id="102"]'},
    {name: 'XC90', code: '[table id=3 /][RH ELEMENTOR id="103"]'}
  ],
  'VW': [
    {name: '', code: ''},
    {name: 'Golf', code: '[table id=4 /][RH post id="104"]'},
    {name: 'Polo', code: '[table id=5 /][RH ELEMENTOR id="105"]'},
    {name: 'Scirocco', code: '[table id=6 /][RH post id="106"]'},
    {name: 'Touareg', code: '[table id=7 /][RH ELEMENTOR id="107"]'}
  ],
  'BMW': [
    {name: '', code: ''},
    {name: 'M6', code: '[table id=8 /][RH post id="108"]'},
    {name: 'X5', code: '[table id=9 /][RH ELEMENTOR id="109"]'},
    {name: 'Z3', code: '[table id=10 /][RH post id="110"]'}
  ]
};

function ChangeCarList() {
  var carList = document.getElementById("car");
  var modelList = document.getElementById("carmodel");
  var selCar = carList.options[carList.selectedIndex].value;
  
  // 清空车型下拉框
  while (modelList.options.length) {
    modelList.remove(0);
  }
  
  var cars = carsAndModels[selCar];
  if (cars) {
    cars.forEach(function(item) {
      var option = new Option(item.name, item.code);
      modelList.options.add(option);
    });
  }
  
  // 选择默认品牌时隐藏内容
  var demoEl = document.getElementById("demo");
  if (selCar === 'select') {
    demoEl.style.display = 'none';
    demoEl.innerHTML = '';
  }
} 

function myFunction() {
  var modelList = document.getElementById("carmodel");
  var selectedCode = modelList.value;
  var demoEl = document.getElementById("demo");
  
  if (selectedCode) {
    demoEl.innerHTML = selectedCode;
    demoEl.style.display = 'block';
  } else {
    demoEl.innerHTML = '';
    demoEl.style.display = 'none';
  }
}
</script>

关键说明 #

1. 数据结构调整：把原有的车型数组改成包含name（显示文本）和code（对应短代码）的对象数组，方便关联内容。
2. 下拉框填充逻辑：遍历新的数据结构，将短代码存储在选项的value属性中，同时处理默认品牌的隐藏逻辑。
3. 内容显示逻辑：选择车型后，将对应短代码插入到demo元素中，并控制显示/隐藏状态。
4. 初始化样式：通过CSS默认隐藏demo元素，符合默认不显示表格的需求。

注意：如果你的短代码需要后端（如WordPress）解析才能显示正确内容，前端直接插入短代码可能无法生效，这种情况下需要通过AJAX请求后端接口，传递短代码ID获取解析后的HTML内容再插入页面。

内容的提问来源于stack exchange，提问作者Moshe Dvir