如何建立HTML中不同選擇標籤的選項標籤之間的關係

Question

我在HTML中有三個選擇標籤，帶有選項標籤。我想建立不同選擇標籤的選項標籤之間的關係。

EDIT-1

當我從選擇選擇從選擇name = 「參考」 參考-1，則2014年10月7點17分00秒和2014年10月八時46分00秒name =「from」並選擇name =「to」應該只出現在下拉列表中。當我選擇Reference-2時，2014-09-01 10:00:00和2014-09-01 11:00:00應該只能出現在的下拉列表中，從和到選擇標記。我對IS-

<form method="post"> 
 
Select Reference: 
 
<select name="reference"> 
 
<option value="Select">Select</option> 
 
<option value="Reference-1">Reference-1;</option> 
 
<option value="Reference-2">Reference-2</option> 
 
<option value="Reference-3">Reference-3</option> 
 
<option value="Reference-4">Reference-4</option> 
 
</select> 
 
From Date: 
 
<select name="from"> 
 
<option value="Select">Select</option> 
 
<option value="2014-10-10 07:17:00">2014-10-10 07:17:00</option> 
 
<option value="2014-09-01 10:00:00">2014-09-01 10:00:00</option> 
 
<option value="2014-09-08 10:00:00">2014-09-08 10:00:00</option> 
 
</select> 
 
To Date: 
 
<select name="to"> 
 
<option value="Select">Select</option> 
 
<option value="2014-10-10 08:46:00">2014-10-10 08:46:00</option> 
 
<option value="2014-09-01 11:00:00">2014-09-01 11:00:00</option> 
 
<option value="2014-09-08 10:00:00">2014-09-08 11:00:00</option> 
 
</select><br> 
 

 
<b>Select Date to be compared</b> 
 
<p>Date: <input type="text" id="datepicker"></p> 
 
<input type="submit" value="Submit"><br> 
 
</form>

Answer 1

從reference選擇元素獲取選中的選項的索引，然後禁用除非你從reference了先前指數的指數期權的from和to中選擇元素，所有的選項選擇選項。

JavaScript解決方案：

var reference = document.getElementsByName("reference")[0]; 

var fromSelect = document.getElementsByName("from")[0]; 
var toSelect = document.getElementsByName("to")[0]; 

reference.onchange = function(){ 
    var selectedIndex = this.selectedIndex; 
    for(var i = 1; i <= fromSelect.length; i++){ 
     if(i != selectedIndex){ 
      fromSelect.getElementsByTagName("option")[i].disabled = true; 
      toSelect.getElementsByTagName("option")[i].disabled = true; 
     } else{ 
      fromSelect.getElementsByTagName("option")[i].disabled = false; 
      toSelect.getElementsByTagName("option")[i].disabled = false; 
     } 
    } 
}; 

jsFiddle

jQuery的解決方案：

$("select[name='reference']").on("change", function(){ 
    var $fromSelect = $("select[name='from']"); 
    var $toSelect = $("select[name='to']"); 
    var selectedIndex = $(this).children("option:selected").index(); 
    $fromSelect.children("option").removeAttr("disabled"); 
    $toSelect.children("option").removeAttr("disabled"); 
    $fromSelect.children("option").not(":eq(" + selectedIndex +")").prop("disabled", "disabled"); 
    $toSelect.children("option").not(":eq(" + selectedIndex +")").prop("disabled", "disabled"); 
}); 

jsFiddle

Answer 2

如果第二選擇值依賴於第一選擇選項的HTML代碼，然後直到第一個被選中，你應該禁用整個第二選擇。 選擇第一個選項後，禁用第二選擇中的所有不相關選項並將其啓用給用戶。讓我知道它是否有幫助。

$("select[name='reference']").on('change', function() { 
    var value = $(this).val(); // first selection value 

    if ("Reference-1" == value) { 
     var $selection2 = $("select[name='from']"); 
     $selection2.find("option[value*='2014-09-01 10:00:00']").prop('disabled',true); 
     $selection2.find("option[value*='2014-09-08 10:00:00']").prop('disabled',true); 
    } 
    ... 
}); 

這裏是DEMO