使用javascript更改第二个选择列表基于第一个选择列表选项

我有两个下拉列表填充从数据库中存储的相同日期的数组。我想使用JavaScript或jQuery来更改第二个下拉列表，其基于第一个列表中的选择。因此，例如，如果用户在第一个开始日期列表中选择了03/03/2012，那么我希望第二个列表仅显示或允许数组中的未来日期。 3/3，3/2和3/1会变灰或去除，3/4，3/5将作为可选选项保留。任何人都可以帮助JavaScript编码或提出另一个建议？使用javascript更改第二个选择列表基于第一个选择列表选项

<select id='start_date' name='data[sDate]' title='Use the drop list'> 
<option value="" selected="selected"> </option> 
<option value="03/05/2012">03/05/2012</option> 
<option value="03/04/2012">03/04/2012</option> 
<option value="03/03/2012">03/03/2012</option> 
<option value="03/02/2012">03/02/2012</option> 
<option value="03/01/2012">03/01/2012</option> 
</select> 

<select id='end_date' name='data[eDate]' title='Use the drop list'> 
<option value="" selected="selected"> </option> 
<option value="03/05/2012">03/05/2012</option> 
<option value="03/04/2012">03/04/2012</option> 
<option value="03/03/2012">03/03/2012</option> 
<option value="03/02/2012">03/02/2012</option> 
<option value="03/01/2012">03/01/2012</option> 
</select>

来源

2012-03-16 sloga

您是否也使用服务器端语言？ – Panagiotis 2012-03-16 21:12:51

好点，这对于服务器端来说会容易得多。 – mikevoermans 2012-03-16 21:15:05

与您实际的例子，如果两个列表是完全一样的，然后如果你用index()工作，它很简单。看http://jsfiddle.net/elclanrs/7YrqY/

$('#start_date').change(function(){ 
    var $selected = $(this).find('option:selected'); 
    $('#end_date') 
     .find('option') 
     .prop('disabled', false) 
     .eq($selected.index()-1) 
     .nextAll() 
     .prop('disabled', true); 
});

来源

2012-03-16 21:23:05 elclanrs

+1漂亮和优雅 – 2012-03-16 21:26:33

+1在jsfiddle中很好用，看起来像是我需要的，但是我的实现失败了。是否有任何其他组件/资源需要引用？我目前正在引用ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js“ – sloga 2012-03-16 22:48:57

这里有几个不同的解决方案，包括服务器端。这是一种常见的情况，如果你多搜索一下，我相信你可以在这个网站上找到更多的例子。

http://css-tricks.com/dynamic-dropdowns/

来源

2012-03-16 21:17:13 skipZero

该网站更多地是从各种外部来源获得第二个下拉列表元素，但它的工作原理。 – gereeter 2012-03-16 21:38:46

使用jQuery

$(function(){ //when the page is loaded 

$("#start_date").change(function(){ //register a anonymous function that will be called when the element with id=start_date changes his values 

    var start = $(this).val(); //gets the value of the element 

    $("#end_date option").each(function(i){//for each option of end_date 

     if(new Date($(this).val()).getTime() < new Date(start).getTime()){ //if the date of the element is before the start 
      $(this).hide(); //hide the element 
     }else{ 
      $(this).show(); //shows the element 
     } 
    }); 

});

}）;

我没有测试，但是是这样的东西

来源

2012-03-16 21:23:10 melanke

使用javascript更改第二个选择列表基于第一个选择列表选项

回答

相关问题