如何在html中建立不同选择标签的选项标签之间的关系

Question

我在HTML中有三个带有选项标签的选择标签，我想建立不同选择标签的选项标签之间的关系。

编辑-1

当我从选择name="reference“中选择Reference-1时，那么2014-10-10 07:17:00和2014-10- 08:46:00从select name=”并选择name=“到”应该只出现在下拉列表中，我选择了Reference-2然后2014-09-01 10:00:00和2014-09-01 11:00:00 :00“应该只出现在和to选择标签的下拉列表中。我的html代码是-

​

<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 select元素中获取所选选项的索引，然后禁用from和to select元素的所有选项，但从reference select选项获得的前一个索引的索引选项除外。

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

http://jsfiddle.net/codeSpy/sashb4m8/

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");
});

http://jsfiddle.net/codeSpy/5Lqo62z8/

Answer 2

如果第二个选择值依赖于第一个选择选项，那么您应该禁用整个第二个选择，直到第一个选择被选中。当第一个选项被选中时，在第二个选择中禁用所有不相关的选项，并将其启用给用户。如果有帮助请告诉我。

$("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);
    }
    ...
});

这是演示