Question

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

<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下拉列表中禁用特定值。

因此，例如，如果我在第一个下拉列表中选择“Beginner”，则应禁用第二个下拉列表中“UpperLevel”的选项。

这是我尝试过的，但它不起作用：

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

有什么想法吗？

谢谢！

Answer 1

您可以通过将事件处理程序挂钩到第一个选择的change事件来实现此目的，该事件根据所选选项在第二个选择中设置相关disabled的{{1}}属性，像这样：

＆＃13;

option

＆＃13;

$('#classType').change(function() {
    $('#studentType option[value="upperLevel"]').prop('disabled', $(this).val() == 'Beginner')
});

＆＃13;

Answer 2

这应该符合您的需求： 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);
    }
  });

});

Answer 3

通过jQuery：

    the 0.41800  0.249680 -0.41242  0.121700 0.345270 -0.044457 -0.49688 -0.178620 -0.00066023 -0.656600 0.278430 -0.14767 -0.55677  0.14658 -0.0095095
    .   0.15164  0.301770 -0.16763  0.176840 0.317190  0.339730 -0.43478 -0.310860 -0.44999000 -0.294860 0.166080  0.11963 -0.41328 -0.42353  0.5986800
    of  0.70853  0.570880 -0.47160  0.180480 0.544490  0.726030  0.18157 -0.523930  0.10381000 -0.175660 0.078852 -0.36216 -0.11829 -0.83336  0.1191700
    to  0.68047 -0.039263  0.30186 -0.177920 0.429620  0.032246 -0.41376  0.132280 -0.29847000 -0.085253 0.171180  0.22419 -0.10046 -0.43653  0.3341800
    and 0.26818  0.143460 -0.27877  0.016257 0.113840  0.699230 -0.51332 -0.473680 -0.33075000 -0.138340 0.270200  0.30938 -0.45012 -0.41270 -0.0993200
    in  0.33042  0.249950 -0.60874  0.109230 0.036372  0.151000 -0.55083 -0.074239 -0.09230700 -0.328210 0.095980 -0.82269 -0.36717 -0.67009  0.4290900

Answer 4

我将如何操作，为每个选项添加一个支持数据的标记，如下所示：

<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');
        }
    });
});

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

4 个答案: