禁用特定下拉列表中的特定选项

Disable specific option in specific dropdown

本文关键字：选项 下拉列表      更新时间：2023-09-26

我在一个小网站上工作，目前我的表单中有两个下拉列表，都在下面：

<select name="classType" id="classType" required>
   <option value="" disabled selected>Select Your Class Type</option>
   <option value = "Beginner">Beginner</option>
   <option value = "Intermediate">Intermediate</option>
   <option value = "Advanced">Advanced</option>          
</select>
<br/>
<select name="studentType" id="studentType" required>
    <option value="" disabled selected>Select Your Student Type</option>
    <option value = "lowerLevel">Lower Level</option>
    <option value = "upperLevel">Upper Level</option>
</select>
<br/>

我尝试过一些javascript，但只是在初级阶段。我想知道是否有一种方法可以禁用studentType下拉列表中的特定值。

因此，例如，如果我在第一个下拉列表中选择"初学者"，那么第二个下拉菜单中的"UpperLevel"选项应该被禁用。

这是我尝试过的，但没有奏效：

var dropdown = document.getElementById("classType"); 
dropdown.onchange = function(event){ 
    if (dropdown.value == "Beginner") { 
        // .....

有什么想法吗？

谢谢！

您可以通过将事件处理程序挂接到第一个选择的change事件来实现这一点，该事件根据所选选项设置第二个选择中相关option的disabled属性，类似于以下内容：

$('#classType').change(function() {
    $('#studentType option[value="upperLevel"]').prop('disabled', $(this).val() == 'Beginner')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="classType" id="classType" required>
  <option value="" disabled="true" selected="true">Select Your Class Type</option>
  <option value="Beginner">Beginner</option>
  <option value="Intermediate">Intermediate</option>
  <option value="Advanced">Advanced</option>
</select><br/>
<select name="studentType" id="studentType" required>
  <option value="" disabled="true" selected="true">Select Your Student Type</option>
  <option value="lowerLevel">Lower Level</option>
  <option value="upperLevel">Upper Level</option>
</select><br/>

这应该符合您的需求：http://codepen.io/themeler/pen/yOjWXB

<select name="classType" id="classType" required>
   <option value="" disabled selected>Select Your Class Type</option>
   <option value = "Beginner">Beginner</option>
   <option value = "Intermediate">Intermediate</option>
   <option value = "Advanced">Advanced</option>          
</select>
<br/>
<select name="studentType" id="studentType" required>
    <option value="" disabled selected>Select Your Student Type</option>
    <option value="lowerLevel">Lower Level</option>
    <option value="upperLevel">Upper Level</option>
</select>
<br/>
$(function () {
  var $class   = $('#classType'),
      $student = $('#studentType');
  $class.on('change', function () {
    var $this = $(this),
        $ul   = $student.find('[value="upperLevel"]');
    // clear value of student type on class type change
    $student.find(':selected').prop('selected', false);
    $student.find('option:first-child').prop('selected', true);
    // lock / unlock position
    if ($this.val() === 'Beginner') {
      $ul.prop('disabled', true);
    } else {
      $ul.prop('disabled', false);
    }
  });
});

通过jQuery:

$('#studentType option[value="upperLevel"]').attr('disabled','disabled');

以下是我的操作方法，为每个选项添加一个启用数据的标记，如下所示：

<select name="classType" id="classType" required>
    <option value="" disabled selected>Select Your Class Type</option>
    <option value = "Beginner" data-enabled="lowerLevel">Beginner</option>
    <option value = "Intermediate" data-enabled="lowerLevel,upperLevel">Intermediate</option>
    <option value = "Advanced" data-enabled="upperLevel">Advanced</option>          
</select>
<br/>
<select name="studentType" id="studentType" required>
    <option value="" disabled selected>Select Your Student Type</option>
    <option value = "lowerLevel">Lower Level</option>
    <option value = "upperLevel">Upper Level</option>
</select>
<br/>

在更改下拉菜单时，禁用另一个下拉菜单中的所有选项，然后循环查看它们是否在所选的已启用标签中，或者像这样为空：

$('#classType').on('change', function(){
    var allowed = $('#classType option:selected').attr('data-enabled').split(',');
    $('#studentType option').attr('disabled','disabled');
    $('#studentType option').each(function(){
        if (allowed.indexOf($(this).val()) > -1 || !$(this).val()) {
            $(this).removeAttr('disabled');
        }
    });
});
相关文章：