How to change Dynamic Dropdown items in mvc 4(It not a casecaddind dropdown)

Question

I have 3 dropdown in my view page. @HTML.Dropdownlistfor().My dropdown items are in database.

The dropdown items are :

     id    name
      0    SELECT
      1      A
      2      B
      3      C

My requirements are:

1)When my 1st dropdown selected value is( A ),Then 2nd and 3rd dropdown only show (SELECT , B ,C).
2)Now my 1st dropdown change Selected Value( A ) into (SELECT),Then 2nd dropdown show( (SELECT,A , B ,C).

How to implement this concept .

You need to use Ajax for this. [Here is an example](http://stackoverflow.com/questions/5497524/easiest-way-to-create-a-cascade-dropdown-in-asp-net-mvc-3-with-c-sharp) — teo van kot, Aug 24 '15 at 07:55
Handle the `.change()` event of the first dropdown. Depending on its value, show or hide the relevant ` — , Aug 24 '15 at 07:59

Jai · Accepted Answer · 2015-08-24T08:44:58.660

1

What you need, just bind a change event on first dropdown and check the condition for if the value is not select then hide that specific item from the second dropdown else show all the hidden options from the second dropdown.

$('#dd1').change(function() { // change event bound on first dropdown
  var index = $(this).find(':selected').index(); // get the index here
  if (this.value !== 'select') { // check if the value is not 'select'
    $('#dd2').find('option:hidden').show();
    $('#dd2').find('option:eq('+index+')').hide();
    // get the selected option index and hide it.
  } else {
    $('#dd2').find('option:hidden').show();
    // if the value is select then show the hidden option.
  }


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dd1'>
  <option>select</option>
  <option value='A'>A</option>
  <option value='B'>B</option>
  <option value='C'>C</option>
</select>
<select id='dd2'>
  <option>select</option>
  <option value='foo'>Foo</option>
  <option value='bar'>Bar</option>
  <option value='baz'>Baz</option>
</select>

edited Aug 24 '15 at 08:44

answered Aug 24 '15 at 08:04

Jai

74,255
12
74
103

hai jai,Nice demo ,but one problem,My requirement are each dropdown selected value is unique – Mano Johnbritto Aug 24 '15 at 08:12
Okay! i get it now so you can do get the index of the option then you can hide it with that index. wait i will update it. – Jai Aug 24 '15 at 08:14
@ManoJohnbritto check updated. – Jai Aug 24 '15 at 08:17
Problems on 3 times continiously select and change selected value in 1st dropdown,the 2nd dropdown showed only SELECT option – Mano Johnbritto Aug 24 '15 at 08:24
@ManoJohnbritto So now let me guess the requirement is : if one is hidden after selection then on next change hidden will be shown and currently selected element will be hidden. right. – Jai Aug 24 '15 at 08:31
@ManoJohnbritto put this line before hiding: `$('#dd2').find('option:hidden').show();` see the updated one. – Jai Aug 24 '15 at 08:33
1

,yes jai,Your guess is right – Mano Johnbritto Aug 24 '15 at 08:34
just updated see if that solves your issue. – Jai Aug 24 '15 at 08:35
,Almost right,just 2 correction only left. 1)When 2nd dropwn selected value is ( C ),the 1st dropdown does't show the (C),but it showing.2)Your 2nd dropdown show index number, Pls change it,Please Update your code – Mano Johnbritto Aug 24 '15 at 08:40
Your request to change the (2nd) correction is just for demo pupose but still i have changed it so that you can understand that `index` is different than `value`. Now Correction (1st) i don't get it. Is it something like dependent on each other. if change first one then affect secon one and if second one is having change event then first one is affected. – Jai Aug 24 '15 at 08:48
Thanku @jai,Please correct correction (1st), – Mano Johnbritto Aug 24 '15 at 08:57
@ManoJohnbritto That seems to be a small edit would you mind to do it yourself, this will help you understanding the basics of it. when you fail or get stuck then comeback and ask for it, i definitely answer for that. so what you asked is already been answered actually. – Jai Aug 24 '15 at 09:03
1

,Ok jai,Thanku so much – Mano Johnbritto Aug 24 '15 at 09:05

How to change Dynamic Dropdown items in mvc 4(It not a casecaddind dropdown)

1 Answers1