如何建立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