Php 在“选择”中选择一个值时，将显示另一个选择，如果第一个值发生更改，则选择将消失

我正在尝试了解如何在从第一个“选择”字段中选择值时显示“选择”字段

比方说

第一选择区

<label>Transfer Type</label>
<select name="type">`
    <option value="1">Airport to Resort</option>
    <option value="2">Resort to Airport</option>
</select>

<label>Arrival Airport</label>
<select name="Aairport">
    <option value="1">X Airport</option>
    <option value="2">Y Airport</option>
</select>

<label>Arrival Resort</label>
<select name="resort">
    <option value="1">Hilton Paris</option>
    <option value="2">Sheraton Paris</option>
</select>

传输类型
`
机场度假酒店
机场度假村

第二选择区

<label>Transfer Type</label>
<select name="type">`
    <option value="1">Airport to Resort</option>
    <option value="2">Resort to Airport</option>
</select>

<label>Arrival Airport</label>
<select name="Aairport">
    <option value="1">X Airport</option>
    <option value="2">Y Airport</option>
</select>

<label>Arrival Resort</label>
<select name="resort">
    <option value="1">Hilton Paris</option>
    <option value="2">Sheraton Paris</option>
</select>

抵达机场
X机场
Y机场

第三选择区

<label>Transfer Type</label>
<select name="type">`
    <option value="1">Airport to Resort</option>
    <option value="2">Resort to Airport</option>
</select>

<label>Arrival Airport</label>
<select name="Aairport">
    <option value="1">X Airport</option>
    <option value="2">Y Airport</option>
</select>

<label>Arrival Resort</label>
<select name="resort">
    <option value="1">Hilton Paris</option>
    <option value="2">Sheraton Paris</option>
</select>

抵达度假村
希尔顿巴黎酒店
巴黎喜来登酒店

这是默认视图。如果在第一个“选择”部分中选择的值为“Resort to Airport”，则第二个“选择”应消失，并出现在“选择”下方

<label>Departure Airport</label>
<select name="Dairport">
<option value="1">X Airport</option>
    <option value="2">Y Airport</option>
</select>

出发机场
X机场
Y机场

在“出发机场”后选择

第三个选择区域应保持不变

---

谢谢

如果我没听懂你的意思，你想让脚本在选择所有字段时做些什么吗？ 尝试使用js ansd jquery，然后您就可以在选择或不选择时执行某些操作。。和ajax来加载php信息

编辑：使用类似以下内容（它是jQuery）

---

我有一个jQuery解决方案。使用在选择框的更改事件中显示的隐藏div非常简单

非常简单：

$("#type").on("change", function(e) {
    if ($(e.target).val() === "0") {
         $("#AairportContainer").addClass("ui-helper-hidden");
    } else {
         $("#AairportContainer").removeClass("ui-helper-hidden");
    }      
});

---

简单的JavaScript方法是可能的，尽管它确实需要相对最新的浏览器，因为使用了

document.querySelector（）

：

使用jQuery（为了演示使用库的相对简单性），它稍微简化了：

var el = document.getElementById('type'),
    map = {
        1: 'aairport',
        2: 'dairport'
    };

$('#dairport, label[for="dairport"]').hide();
$('#type').change(function(){
    var that = this;
    $('.toggles').toggle(function(){
        var self = this,
            test = map[that.selectedIndex + 1];
        return (this.id && this.id == test) || (this.htmlFor && this.htmlFor == test);
    });
})

使用稍微修改的HTML添加类名：

<label for="type">Transfer Type</label>
<select name="type" id="type">`
    <option value="1">Airport to Resort</option>
    <option value="2">Resort to Airport</option>
</select>
<label for="aairport" class="toggles">Arrival Airport</label>
<select name="aairport" id="aairport" class="toggles">
    <option value="1">X Airport</option>
    <option value="2">Y Airport</option>
</select>
<label for="dairport" class="toggles">Departure Airport</label>
<select name="Dairport" id="dairport" class="toggles">
    <option value="1">X Airport</option>
    <option value="2">Y Airport</option>
</select>
<label for="resort">Arrival Resort</label>
<select name="resort" id="resort">
    <option value="1">Hilton Paris</option>
    <option value="2">Sheraton Paris</option>
</select>

传输类型
`
机场度假酒店
机场度假村
到达机场
X机场
Y机场
出发机场
X机场
Y机场
抵达度假村
希尔顿巴黎酒店
巴黎喜来登酒店

参考资料：

---

这是JavaScript的工作，而不是PHP的工作：一旦用户的浏览器控制了页面，PHP就没有进一步的访问权限，也没有与之交互的能力。所以我们需要知道你是否能够接受JavaScript解决方案。JavaScript对我来说没问题。是的。我找到了一个js脚本，

script type=“text/javascript”>function xxx（el）{var selectedValue=el.value；if（selectedValue==“Matchcode”）document.getElementById（“Types”）.style.display=“”；}

和

但是这段代码有问题，它隐藏了第二个选择，并使隐藏的一个可见，但如果我将第一个选择更改回“机场到度假村”，它不会返回到原始的“选择”