Question

我对网络开发很陌生，并且有一个我无法解决的问题。我有一个表有3个项目：汽车，颜色和电机类型。表示例如下：

 <table>
   <tr>
        <th>Car</th>
        <th>Color</th>
        <th>Motor type</th>
    </tr>
    <tr>
        <td>Mercedes</td>
        <td>Blue</td>
        <td>Petrol</td>
    </tr>
    <tr>
        <td>Mercedes</td>
        <td>Red</td>
        <td>Diesel</td>
    </tr>
    <tr>
        <td>VW</td>
        <td>Blue</td>
        <td>Hybrid</td>
    </tr>
    <tr>
        <td>VW</td>
        <td>Yellow</td>
        <td>Diesel</td>
    </tr>
    <tr>
        <td>Alfa Romeo</td>
        <td>Red</td>
        <td>Diesel</td>
    </tr>
    <tr>
        <td>Alfa Romeo</td>
        <td>Green</td>
        <td>Petrol</td>
    </tr>
</table>

我想添加3个带有复选框的下拉列表来过滤所选项目，一个用于汽车，一个用于颜色，一个用于电机类型。下拉列表中的项目应根据表中的项目动态填充。例如：

第一个下拉列表将由3个复选框组成：Mercedes，VW和Alfa Romeo
第二个将有蓝色，红色，黄色和绿色
和第三个将有汽油，柴油和混合动力

另外，例如，当我选择梅赛德斯时，黄色和绿色应该隐藏在第二个下拉列表中，而混合应该隐藏在第三个下拉列表中，因为没有任何黄色/绿色/混合梅赛德斯。

有人可以帮助编写适当的JavaScript / jQuery文件吗？非常感谢你。

Answer 1

首先，将onchange设置为要跟踪的复选框。

然后，在onchange事件中，使用要隐藏下拉列表项的项的索引：

document.getElementById('your dropdownlist id').options[index].style.display = 'none';

这是一个例子。

function changeItemsOfDropDown() {
  var drop = document.getElementById("optionDrop");

  for (var i = 0; i < drop.options.length; i++) {
    if (drop.options[i].value == "Green" || drop.options[i].value == "Blue") {
      drop.options[i].style.display = "none";
    }
  }
}

function fillItemsToDropDown() {
  var drop = document.getElementById("optionDrop");
  
  for(var i = 0; i < 5; i++) {
    var option = document.createElement('option');
    option.text = option.value = "test" + i;
    drop.add(option);
  }
  
}

<input type="checkbox" onchange="changeItemsOfDropDown()" >Click to hide items of Green and Blue</input>
<button type="checkbox" onchange="fillItemsToDropDown()" >Fill new options to dropdownlist</button>
<br>
<select id="optionDrop">
                <option value="Red">Red</option>
                <option value="Green">Green</option>
                <option value="Orange">Orange</option>
                <option value="Blue">Blue</option>
            </select>

Answer 2

我在php中写道，你可以修改这个

这只是你的想法

//fetch from database
<input type="checkbox" value="Mercedes" onclick="car_fun(this.value)"> Mercedes
<input type="checkbox" value="VW" onclick="car_fun(this.value)"> VW
<input type="checkbox" value="Alfa Romeo" onclick="car_fun(this.value)"> Alfa Romeo

<select id="color">
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Orange">Orange</option>
<option value="Blue">Blue</option>
</select>

<select id="type">
<option value="Petrol">Petrol</option>
<option value="Diesel">Diesel</option>
<option value="Hybrid">Hybrid</option>
</select>

<script>
function car_fun(car)
{
$.ajax({
url:// your url,
data:"$car_name="+car,
type:"post",
dataType:"json",
success:function(result)
{
$("#color").html(result.color);
$("#type").html(result.type);
}
});
}
</script>

使用传递的汽车价值

从数据库中获取值

链接下拉列表复选框过滤表

2 个答案: