在第一个选择框中选择选项时更改选择框选项答案

【问题标题】：Change select box options upon selecting option in first select box在第一个选择框中选择选项时更改选择框选项
【发布时间】：2018-04-01 00:03:28
【问题描述】：

在我的JavaScript程序中我创建了两个选择框，并且选择了选择框中的第一个选项时，我想在图像选择框中显示3个图像名称的选择。选择第二个选项时，我想在图像框中显示相应的3个图像名称的选择。为此，我在下面进行了编码。但它不起作用。谁能帮我解决？

代码：

    <!DOCTYPE html>
    <html>
    <head>
    	<title>selectbox</title>
    	<style>
    
    	div.event {
    		padding-left: 40%;
    		padding-top: 5%;
    	}
    
    	#mySelect{
    		width: 60px;
    		height: 50px;
    		text-align: center;
    	}
    </style>
    </head>
    <body>
    <form name="myForm">
    	<div class="event">
    		<select id="mySelect" multiple size="3" onchange="myFunction()">
    			<option value="name" disabled="disabled">Name</option>
    			<option value="animals">Animals</option>
    			<option value="flowers">Flowers</option>
    		</select>
    
    		<select id="mySelect2" multiple size="4">
    			<option disabled="disabled">Images</option>
    		</select>
    	</div>
    </form>
    
    <script>
    
    	var selectbox2 = document.getElementById('mySelect2');
    
    	function myFunction() {
    		if (document.getElementById('mySelect').value == "Animals"){
    			selectbox2.append('<option>Tiger</option>');
    			selectbox2.append('<option>Lion</option>');
    			selectbox2.append('<option>Bear</option>');
    		} 
    
    		else if (document.getElementById('mySelect').value == "Flowers"){
    			selectbox2.append('<option>Rose</option>');
    			selectbox2.append('<option>Lotus</option>');
    			selectbox2.append('<option>Lily</option>');
    		}
    	}
    
    </script>
    
    </body>
    </html>

【问题讨论】：

“不工作”是什么意思？您在控制台中是否有任何错误？
请注意，如果您将此代码设为 sn-p，我们实际上可以在这里运行它，而无需转到 JSFiddle/etc。
不相关，但保留选项值/文本对的数组并使用通用函数来创建选项可能更容易，而不是为每件事手动完成。

标签： javascript html

【解决方案1】：

这可能会对您有所帮助。我刚刚添加了一些简单的功能。

<!DOCTYPE html>
<html>

<head>
  <title>selectbox</title>
  <style>
    div.event {
      padding-left: 40%;
      padding-top: 5%;
    }
    
    #mySelect {
      width: 60px;
      height: 50px;
      text-align: center;
    }
  </style>
</head>

<body>
  <form name="myForm">
    <div class="event">
      <select id="mySelect" multiple size="3" onchange="myFunction()">
    			<option value="name" disabled="disabled">Name</option>
    			<option value="animals">Animals</option>
    			<option value="flowers">Flowers</option>
    		</select>

      <select id="mySelect2" multiple size="4">
    			<option disabled="disabled">Images</option>
    		</select>
    </div>
  </form>

  <script>
    var selectbox2 = document.getElementById('mySelect2');

    function myFunction() {
      if (document.getElementById('mySelect').value == "animals") {
        selectbox2.options.length = 1;
        let tiger = document.createElement('option');
        tiger.text = 'Tiger';
        selectbox2.add(tiger);
        let lion = document.createElement('option');
        lion.text = 'Lion';
        selectbox2.add(lion);
        let bear = document.createElement('option');
        bear.text = 'Bear';
        selectbox2.add(bear);
      } else if (document.getElementById('mySelect').value == "flowers") {
        selectbox2.options.length = 1;
        let rose = document.createElement('option');
        rose.text = 'Rose';
        selectbox2.add(rose);
        let lotas = document.createElement('option');
        lotas.text = 'Lotas';
        selectbox2.add(lotas);
        let lilly = document.createElement('option');
        lilly.text = 'Lilly';
        selectbox2.add(lilly);
      }
    }
  </script>

</body>

</html>

【讨论】：

【解决方案2】：

您的第一个选择值以小写字母书写，但您的 if 测试正在测试大写。

其次，append() 方法不是标准的，您应该改用.appendChild()。但是，对于任何一个，您都不能附加字符串。对于字符串，您必须设置 .innerHTML 属性。

如果你想使用.append()或.appendChild()，你需要附加一个“DOM节点”，可以这样创建：

 var option = document.create("option");
 option.value = "something";

最后，不要使用内联 HTML 事件属性（onclick、onchange 等）。 There are many reasons why。而是在 JavaScript 区域中完成所有 JavaScript 工作，并遵循现代事件处理标准 (.addEventListener())。

<!DOCTYPE html>
    <html>
    <head>
    	<title>selectbox</title>
    	<style>   
    	div.event {
    		padding-left: 40%;
    		padding-top: 5%;
    	}
    
    	#mySelect{
    		width: 60px;
    		height: 50px;
    		text-align: center;
    	}
    </style>
    </head>
    <body>
    <form name="myForm">
    	<div class="event">
    		<select id="mySelect" multiple size="3">
    			<option value="name" disabled="disabled">Name</option>
    			<option value="animals">Animals</option>
    			<option value="flowers">Flowers</option>
    		</select>
    
    		<select id="mySelect2" multiple size="4">
    			<option disabled="disabled">Images</option>
    		</select>
    	</div>
    </form>
    
    <script>
    
      // Get a reference to the first drop down:
      var selectbox1 = document.getElementById('mySelect');
      
      // Set up the event handling for the first select:
      selectbox1.addEventListener("change", myFunction);
    
    	var selectbox2 = document.getElementById('mySelect2');
    
    	function myFunction() {
    		if (document.getElementById('mySelect').value == "animals"){
    			selectbox2.innerHTML = '<option disabled="disabled">Images</option><option>Tiger</option><option>Lion</option><option>Bear</option>';
    		} 
    
    		else if (document.getElementById('mySelect').value == "flowers"){
    			selectbox2.innerHTML = '<option disabled="disabled">Images</option><option>Rose</option><option>Lotus</option><option>Lily</option>';
    		}
    	}
    
    </script>
    
    </body>
    </html>

【讨论】：