Question

在我的javascript程序中，我创建了两个选择框，当选择了选择框中的第一个选项时，我想在图像选择框中显示3个图像名称的选择。选择第二个选项后，我想在图像框中显示相应的3个图像名称的选择。为此，我做了以下编码。但它不起作用。任何人都可以帮我解决？

代码：

＆＃13;

    <!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>

＆＃13;

Answer 1

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

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

如果您想使用.append()或.appendChild()，则需要附加＆＃34; DOM节点＆＃34;，可以像这样创建：

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

最后，请勿使用内联HTML事件属性（onclick，onchange等）。的 There are many reasons why 即可。而是将所有JavaScript工作在JavaScript区域中，并遵循现代标准进行事件处理（ .addEventListener() ）。

＆＃13;

<!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>

＆＃13;

Answer 2

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

<!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 个答案: