Question

100

javascript Change the Dropdown values based on other dropdown

rated 0 times [ 101] [ 1] / answers: 1 / hits: 54441 / 13 Years ago, fri, may 13, 2011, 12:00:00

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)

(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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

longd

Add To Favorites

Follow

Total Points: 616

Total Questions: 110

Total Answers: 101

Location: Andorra

Member since Sat, May 27, 2023

1 Year ago

longd questions

1 JS to TS: Type 'null' is not assignable to type 'number'

Mon, Jan 24, 22, 00:00, 2 Years ago

1 Typescript class variables and error: refers to a value, but is being used as a type here. . Did you mean typeof' .... Why exactly?

Wed, May 26, 21, 00:00, 3 Years ago

1 Slick Slider two rows, how?

Sat, Apr 3, 21, 00:00, 3 Years ago

1 VS Code auto formatting with prettier

Mon, Jul 13, 20, 00:00, 4 Years ago

1 Uncaught SyntaxError: import declarations may only appear at top level of a module:1:18 asking again

Tue, Jun 9, 20, 00:00, 4 Years ago

View All

answered 13 Years ago tierney · Accepted Answer

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>