javascript - 如何更改 mvc 4 中的动态下拉项(它不是 casecaddind 下拉列表)

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 8 年前。

Improve this question

我的 View 页面中有 3 个下拉菜单。 @HTML.Dropdownlistfor()。我的下拉项在数据库中。

The dropdown items are :

     id    name
      0    SELECT
      1      A
      2      B
      3      C

我的要求是:

1)当我的第一个下拉列表选择的值为( A )时，第二个和第三个下拉列表仅显示(SELECT ， B ，C)。
2)现在我的第一个下拉列表将选定值( A )更改为(SELECT)，然后第二个下拉列表显示((SELECT，A，B，C)。

如何实现这个概念。

Answer 1

您需要什么，只需在第一个下拉列表中绑定(bind)一个 change 事件，然后检查条件，如果未选择该值，则从第二个下拉列表中隐藏该特定项目，否则显示第二个下拉列表中的所有隐藏选项第二个下拉菜单。

$('#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>