• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Hide Dropdowns from each other with if statement???


i´ve got a create form which sents data to a mysql table. In this form I´ve got two dropdown menues.

Is it possible to make one of them invisible if a certain value is selected in the other one?


Dropdown 1 values: no value, one, two, three;
Dropdown 2 values: no value, 99, 88, 77;

So I want to achieve that when the user selects a value in Dropdown 1 like "one" the Dropdown 2 is hiding automatically or doesn´t allow an entry at least.

With Dropdown 2 vice versa.

Hoping for your great ideas as always :-)

Greetings Sebastian

That is simple code with jQuery
$('#dropdown1, #dropdown2').click(function(){ // catch click event for the two dropdowns
   var clicked = $(this).attr('id').replace(/dropdown/,''); // get number of dropdown
   var notclicked = (clicked == 1)?2:1; //
   $('#dropdown'+notclicked).attr('disabled',TRUE); // disable not clicked dropdown
It a little more complicated when you want to re-enable the dropdown when the no value option is choosen.

Thank you for your answer. My Problem is that I have different DOM Ids for my dropdowns.

Id Dropdown1: todo_id
Id Dropdown2: project_id (looked with firebug)

For todo_id it looks like this "inspected":
select id="todo_id" name="todo_id">
<option value="0">no task</option>
<option value="1">test todo one</option>
<option value="2">test todo two</option>

For project_id its the same with different values.

Now what I want is when a user selects a different entry from value="0" no task in any of the two dropdowns the other one should hide.

Here´s the code I tried:

$('#todo_id, #project_id').click(function(){ // catch click event for the two dropdowns
        var clicked = $(this).attr('id').replace(/dropdown/,''); // get number of dropdown
        var notclicked = (clicked == todo_id)?project_id:todo_id; //
        $('#notclicked').attr('disabled',TRUE); // disable not clicked dropdown

Doesn´t work :-(

friendly push :-)

[eluser]Randy Casburn[/eluser]
disclaimer - I don't know jQuery all that well.
$('#todo_id, #project_id').click(function(){ // catch click event for the two dropdowns
   var clicked = $(this).attr('id').replace(/dropdown/,''); // get number of dropdown
   var notclicked = (clicked == 1)?'#project_id':'#todo_id'; //  <<<--- CHANGE
   $(notclicked).attr('disabled',TRUE); // disable not clicked dropdown


[edit] I change the dropdown DOM ids so they are correct now.

Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  

  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2020 MyBB Group.