Question

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

修改-1

当我从select name =＆＃34; reference＆＃34;中选择Reference-1时然后2014-10-10 07:17:00和2014-10-10 08:46:00从选择名称=＆＃34;从＆＃34;并选择名称=＆＃34;到＆＃34;应该只出现在下拉列表中。当我选择Reference-2时，2014-09-01 10:00:00和2014-09-01 11:00:00应该只出现在的下拉列表中< / strong>和到选择标记。我的html代码是 -

＆＃13;
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 1

如果第二个选择值取决于第一个选择选项，则应禁用整个第二个选择，直到选择第一个选择。选择第一个选项后，在第二个选择中禁用所有不相关的选项，并将其启用给用户。如果有帮助，请告诉我。

$("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

Answer 2

从reference select元素中获取所选选项的索引，然后禁用from和to选择元素的所有选项，但选项中除了上一个索引的索引之外的选项reference选择选项。

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

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

2 个答案: