当在select中选择一个值时，将出现另一个选择，如果第一个值被更改，则选择将消失

我有一个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():

function selectToggle(source, map) {
    var opts = source.options,
        index = source.selectedIndex,
        id, cur;
    for (var i = 0, len = opts.length; i < len; i++){
        id = map[opts[i].value];
        cur = document.querySelector('#' + id);
        cur.style.display = i === index ? 'inline-block' : 'none';
        document.querySelector('label[for="' + id + '"]').style.display = i === index ? 'inline-block' : 'none';
    }
}
var el = document.getElementById('type'),
    map = {
        1: 'aairport',
        2: 'dairport'
    };
el.onchange = function () {
    selectToggle(this, map);
};

JS Fiddle demo.

上面的代码与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">Arrival Airport</label>
<select name="aairport" id="aairport">
    <option value="1">X Airport</option>
    <option value="2">Y Airport</option>
</select>
<label for="dairport">Departure Airport</label>
<select name="Dairport" id="dairport">
    <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>

和CSS:

label, select {
    display: inline-block;
    float: left;
    box-sizing: border-box;
    margin: 0 0 0.5em 0;
}
select + label {
    clear: left;
}
label {
    width: 8em;
    margin-right: 0.5em;
    text-align: right;
}
label::after {
    content:': ';
}
#dairport,
label[for=dairport] {
    display: none;
}

使用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);
    });
})

JS Fiddle demo.

稍微修改一下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>

引用:

• document.querySelector() .

如果我理解你的权利，你想让脚本做的事情，当你选择所有字段?尝试使用js和jquery，而不是让你在选择或不选择上做一些事情。用ajax加载PHP信息

编辑:使用像这样的东西(它是jQuery)

$('input').click(function() {
   if($('input[name=type]').is(':checked') && $('input[name=Aairport]').is(':checked')) { 
       //AJAX
    }
});