html使用java脚本选择另一个选择的更改选项/值

Question

我有两个html选择例如请参阅下面的代码。

<select class="select1" onchange='customJavascriptfuntion()'>
<option value='a'>a</option>
<option value='b'>b</option>
<option value='c'>c</option>
</select>


<select class="select2">
<option value='d'>d</option>
<option value='e'>e</option>
<option value='f'>f</option>

<option value='g'>g</option>
<option value='h'>h</option>
<option value='i'>i</option>
<option value='j'>j</option>
</select>

所以我需要一个javascript函数来改变第二个选择的选项，具体取决于第一个选择，例如，如果我选择＆＃34; b＆＃34;然后它应该显示＆＃34; g，h，i，j＆＃34;选项或如果我选择＆＃34; c＆＃34;那么它应该显示选项为＆＃34; d，e，f＆＃34;或者如果我选择选项＆＃34; a＆＃34;然后它应该显示所有选项。

Answer 1

使用纯JavaScript进行操作。您可以检查onchange event上的值并相应地添加options。

function customJavascriptfuntion(obj) {
  var select2 = document.getElementsByClassName("select2")[0];
  select2.innerHTML = "";
  if (obj.value == "a") {
    var opt = document.createElement('option');
    opt.value = 'd';
    opt.innerHTML = 'd';
    select2.appendChild(opt);
    var opt = document.createElement('option');
    opt.value = 'e';
    opt.innerHTML = 'e';
    select2.appendChild(opt);
    var opt = document.createElement('option');
    opt.value = 'f';
    opt.innerHTML = 'f';
    select2.appendChild(opt);
    var opt = document.createElement('option');
    opt.value = 'g';
    opt.innerHTML = 'g';
    select2.appendChild(opt);
    var opt = document.createElement('option');
    opt.value = 'h';
    opt.innerHTML = 'h';
    select2.appendChild(opt);
    var opt = document.createElement('option');
    opt.value = 'i';
    opt.innerHTML = 'i';
    select2.appendChild(opt);
  }
  if (obj.value == "c") {
    var opt = document.createElement('option');
    opt.value = 'd';
    opt.innerHTML = 'd';
    select2.appendChild(opt);
    var opt = document.createElement('option');
    opt.value = 'e';
    opt.innerHTML = 'e';
    select2.appendChild(opt);
    var opt = document.createElement('option');
    opt.value = 'f';
    opt.innerHTML = 'f';
    select2.appendChild(opt);
    
  }
  if (obj.value == "b") {
   
    var opt = document.createElement('option');
    opt.value = 'g';
    opt.innerHTML = 'g';
    select2.appendChild(opt);
    var opt = document.createElement('option');
    opt.value = 'h';
    opt.innerHTML = 'h';
    select2.appendChild(opt);
    var opt = document.createElement('option');
    opt.value = 'i';
    opt.innerHTML = 'i';
    select2.appendChild(opt);
  }

}

<select class="select1" onchange='customJavascriptfuntion(this)'>
<option style="display:none">Select</option>
<option value='a'>a</option>
<option value='b'>b</option>
<option value='c'>c</option>
</select>


<select class="select2">

</select>

Answer 2

这是另一种本地JS方式，如果愿意的话，将它转换为jQuery也很容易。

＆＃13;

＆＃13;

function customJavascriptfuntion(elm){
	// get select 2 (returns array so get first item)
	var select2 = document.getElementsByClassName('select2')[0];
	
	// get select 1 value
	var currentValue = elm.value;
	
	// create option arrays
	var optionB = ["g","h","i","j"]
	var optionC = ["d","e","f"]
	// combine both array options for full list
	var optionA = optionB.concat(optionC); 
	
	// depending on select 1 value populate select 2 values
	if(currentValue === "a")
		createOptions(optionA, select2)
	else if(currentValue === "b")
		createOptions(optionB, select2)
	else if(currentValue === "c")
		createOptions(optionC, select2)
}

// create options for select 2 (elm)
function createOptions(options, elm){
	// reset current options
	elm.innerHTML = "<option selected disabled>Select</option>";
	// loop through each option and create <option> element
	options.forEach(function(optionValue){
		// create option elm
		var opt = document.createElement('option');
		// set value
		opt.value = optionValue;
		// set inner html
		opt.innerHTML = optionValue;
		// add to the select box
		elm.add(opt)
	})
}

＆＃13;

<select class="select1" onchange='customJavascriptfuntion(this)'>
  <option selected disabled>Select</option>
  <option value='a'>a</option>
  <option value='b'>b</option>
  <option value='c'>c</option>
</select>


<select class="select2">
  <option selected disabled>Select</option>
</select>

	

＆＃13;

＆＃13;

＆＃13;