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