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

Question

我试图找出当从第一个选择值时如何显示“选择”字段select “

比方说

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> 

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

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

后 “离开机场” 选择

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

谢谢

Answer 1

如果我明白你的意思，你想让脚本在你选择所有字段时做些什么？ 尝试用js ANSD jQuery的比你可以让做一些事情上选择或不选择..和Ajax加载PHP的信息

编辑：使用这样的事情（这是jQuery的）

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

Answer 2

我有一个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 3

一个普通的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()。