Question

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

让我们说

第一选区

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

第3选区

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

这是默认视图。如果在第一个“选择”部分中选择的值是“度假村到机场”，那么第二个选择应该消失，下面的选择应该出现。

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

在“出发机场”之后选择

第3选区应保持不变。

由于

Answer 1

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

Example

很简单：

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

Answer 2

由于使用了document.querySelector()，因此可以使用简单的JavaScript方法，但它确实需要相对最新的浏览器：

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()。

Answer 3

如果我理解你，你想让脚本在选择所有字段时做一些事情吗？尝试使用js ansd jquery而不是你可以让选择或不选择..和ajax加载php信息

编辑：使用类似这样的东西（它是jQuery）

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

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

3 个答案: