Home/ Questions/Q 5933063
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T14:55:16+00:00

I have a requirement When selected a dropdown value, it has to filter or

  • 0

I have a requirement When selected a dropdown value, it has to filter or remove the values of other dropdown which has index that should be always greater than selected index of first dropdown.

Ex: First Dropdown values:

01:00
01:30
02:00 // suppose i select 02:00 here
02:30
03:00
03:30
04:00
04:30
05:00
05:30

Second Dropdonw Values (on selected 02:00 in the above dropdown should look like below)

02:30
03:00
03:30
04:00
04:30
05:00
05:30

(Im using C# with Asp.net here.)

Any javascript to achieve above would be greatly appreciated

and using script as below as Salman Suggested

<body onload="select()">
<script language="javascript">
function select(){
var select1 = document.getElementById("ddlFrom");
var select2 = document.getElementById("ddlTo");
select1.onchange = function filterDDL() {     // empty select2
while (select2.firstChild) {
select2.removeChild(select2.firstChild);
  }     
 if (select1.selectedIndex == 0)
  { 
  return; 
    }
  for (var i = select1.selectedIndex; i < select1.options.length; i++)
   {  
    var o = document.createElement("option");
    o.value = select1.options[i].value;
    o.text = select1.options[i].text;
    select2.appendChild(o);

      }
   } 
}</script>

but not working…please help on this
Thanks in advance

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Edit (using jQuery to get desired results):

    <select id="one">
    <option value="01:00">01:00</option>
    <option value="01:30">01:30</option>
    <option value="02:00">02:00</option>
    <option value="02:30">02:30</option>
    <option value="03:00">03:00</option>
    <option value="03:30">03:30</option>
</select>

<select id="two"></select>

<script type="text/javascript">
    $(function () {
        $("#one").change(function (e) {
            $("#two").empty();

            var options = 
            $("#one option").filter(function(e){
                return $(this).attr("value") > $("#one option:selected").val();
            }).clone();

            $("#two").append(options);
        });
    });
</script>
    • 0