Question

如果选择任何BSIT，BSCS等（所有BS），我想禁用11年级和12年级;但如果选择STEM，TOP，GAS和HUMSS，将启用11年级和12年级，并启用所有BS。

var disable_options = false;
document.getElementById('type').onchange = function () {
   //alert("You selected = "+this.value);
   if(this.value == "Student")
   {
      document.getElementById('course').removeAttribute('disabled');
      document.getElementById('year_level').removeAttribute('disabled');	
   }
   else
   {
      document.getElementById('course').setAttribute('disabled', true);
      document.getElementById('year_level').setAttribute('disabled', true);
   }
}

<div class="control-group">
	<label class="control-label" for="inputPassword">Type:</label>
	<div class="controls">
	    <select name="type" id="type" required>
		    <option></option>
		    <option>Student</option>
		    <option>Teacher</option>
		    <option>Staff</option>
		    <option></option>
            </select>
	</div>
</div>
	
<div class="control-group">
	<label class="control-label" for="inputPassword">Course Type:</label>
	<div class="controls">
		<select name="course" id="course" required>
			<option></option>
			<option>BSIT</option>
			<option>BSCS</option>
			<option>BSHRM</option>
			<option>BSBM</option>
			<option>BSTM</option>
			<option>STEM</option>
			<option>TOP</option>
			<option>GAS</option>
			<option>HUMSS</option>
		</select>
	</div>
</div>    
<div class="control-group">
	<label class="control-label" for="inputPassword">Year Level:</label>
    <div class="controls">
		<select name="year_level" id="year_level">
			<option> </option>
			<option>First Year</option>
			<option>Second Year</option>
			<option>Third Year</option>
			<option>Fourth Year</option>
			<option>Grade 11</option>
			<option>Grade 12</option>
		</select>
	</div>
</div>

感谢您的回复，这对我的项目有所帮助，谢谢。

Answer 1

与您已有的类似，您需要在课程元素中添加onchange侦听器。

document.getElementById("course").onchange = function() {}

然后将ID添加到11年级和12年级选项中，以便您可以在DOM中找到它们。

<option id="grade-11">Grade 11</option>
<option id="grade-12">Grade 12</option>

最后，听取onchange值并相应地修改选项。

document.getElementById('course').onchange = function() {
  if (["BSCS", "BSIT"].indexOf(this.value) > -1) {
        document.getElementById("grade-11").setAttribute("disabled", true);
        document.getElementById("grade-12").setAttribute("disabled", true);
  } else {
        document.getElementById("grade-11").removeAttribute("disabled");
        document.getElementById("grade-12").removeAttribute("disabled");
  }
}

那就是它！选项元素可以采用disabled属性，当课程元素是＆＃34; BSCS＆＃34;或＆＃34; BSIT＆＃34;

完整代码

＆＃13;

var disable_options = false;
document.getElementById('type').onchange = function () {
   //alert("You selected = "+this.value);
   if(this.value == "Student")
   {
      document.getElementById('course').removeAttribute('disabled');
      document.getElementById('year_level').removeAttribute('disabled');	
   }
   else
   {
      document.getElementById('course').setAttribute('disabled', true);
      document.getElementById('year_level').setAttribute('disabled', true);
   }
}

document.getElementById('course').onchange = function() {
  if (["BSCS", "BSIT"].indexOf(this.value) > -1) {
		document.getElementById("grade-11").setAttribute("disabled", true);
		document.getElementById("grade-12").setAttribute("disabled", true);
  } else {
		document.getElementById("grade-11").removeAttribute("disabled");
		document.getElementById("grade-12").removeAttribute("disabled");
  }
}

＆＃13;

<div class="control-group">
	<label class="control-label" for="inputPassword">Type:</label>
	<div class="controls">
	    <select name="type" id="type" required>
		    <option></option>
		    <option>Student</option>
		    <option>Teacher</option>
		    <option>Staff</option>
		    <option></option>
            </select>
	</div>
</div>
	
<div class="control-group">
	<label class="control-label" for="inputPassword">Course Type:</label>
	<div class="controls">
		<select name="course" id="course" required>
			<option></option>
			<option>BSIT</option>
			<option>BSCS</option>
			<option>BSHRM</option>
			<option>BSBM</option>
			<option>BSTM</option>
			<option>STEM</option>
			<option>TOP</option>
			<option>GAS</option>
			<option>HUMSS</option>
		</select>
	</div>
</div>    
<div class="control-group">
	<label class="control-label" for="inputPassword">Year Level:</label>
    <div class="controls">
		<select name="year_level" id="year_level">
			<option> </option>
			<option>First Year</option>
			<option>Second Year</option>
			<option>Third Year</option>
			<option>Fourth Year</option>
			<option id="grade-11">Grade 11</option>
			<option id="grade-12">Grade 12</option>
		</select>
	</div>
</div>

＆＃13;

Answer 2

首先将value="value"添加到<option>元素，以便您可以一致地读取值。即：<option value="bsit">BSIT</option>，<option value="grade12">Grade 12</option>等

document.getElementById('course').addEventListener('change', function(){

  if(this.value && this.value.substr(0, 2) === 'bs'){

    // if a "bs" option is selected, disable grade 11 and 12 options

    document.querySelector('[value="grade11"]').setAttribute('disabled', '');
    document.querySelector('[value="grade12"]').setAttribute('disabled', '');

  }else{

    // remove all disabled attributes from options

    var disabledOptions = document.querySelectorAll('option[disabled]'),
        i, l = disabledOptions.length;

    for(i = 0; i < l; ++i){

      disabledOptions[i].removeAttribute('disabled');

    }

  }

});

如何通过使用javascript在另一个下拉列表中选择来禁用下拉列表中的选项

2 个答案: