-1

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

让我们说

第一选择区域

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

在“出发机场”后选择

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

谢谢

4

3 回答 3

0

一个普通的 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 小提琴演示。

以上与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 小提琴演示。

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

参考：

于 2013-05-16T20:58:24.963 回答
0

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

例子

很简单：

$("#type").on("change", function(e) {
    if ($(e.target).val() === "0") {
         $("#AairportContainer").addClass("ui-helper-hidden");
    } else {
         $("#AairportContainer").removeClass("ui-helper-hidden");
    }      
});
于 2013-05-16T19:40:13.040 回答
-1

如果我对您的理解正确，您想让脚本在您选择所有字段时执行某些操作？尝试使用 js ansd jquery，而不是让你在选择或不选择时做一些事情。和 ajax 来加载 php 信息

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

$('input').click(function() {
   if($('input[name=type]').is(':checked') && $('input[name=Aairport]').is(':checked')) { 
       //AJAX
    }
});
于 2013-05-16T19:27:46.950 回答