如何在javascript

时间:2018-04-03 09:35:26

标签: javascript html

我最近一直在学习如何使用Javascript。但是,我在尝试完成一个我自己正在做的简单项目时遇到了问题。基本上我有一个包含Intel和AMD CPU的下拉菜单和另一个包含来自同一公司的GPU的菜单。我希望用户能够从列表和代码中选择CPU和GPU,以确定它们是否匹配良好或不兼容。

<!DOCTYPE HTML>
    <HTML>
    <HEAD>
    <script type="text/javascript">
    function populate(S1,S2){
    
    	var S1 = document.getElementById(S1);
    	var S2 = document.getElementById(S2);
    	S2.innerHTML = "";
    	
    	switch(S1.value) {
        case "Intel":
            var optionArray = ["","I7","I5"];
            break;
        case "AMD":
            var optionArray = ["","RX500","RX100"];
            break;
        default:
            break;
    	}
    	
    	for(var i = 0; i < optionArray.length; i++) {
    		var option = document.createElement("option");
    		option.text = optionArray[i];
    		S2.add(option);
    	
    	}	
    }
    </script>
    
    <script type="text/javascript">
    function populate2(S3,S4){
    
    	var S3 = document.getElementById(S3);
    	var S4 = document.getElementById(S4);
    	S4.innerHTML = "";
    	
    	switch(S3.value) {
        case "Intel":
            var optionArray = ["","GTX1080","GTX1050"];
            break;
        case "AMD":
            var optionArray = ["","RX500","RX100"];
            break;
        default:
            break;
    	}
    	
    	for(var i = 0; i < optionArray.length; i++) {
    		var option = document.createElement("option");
    		option.text = optionArray[i];
    		S4.add(option);
    	
    	}	
    }
    </script>
    
    <script>
    function compatable() {
    	var S1
    	var S4
    	var text
    	if (S1 == S4) {
            text = "these parts are compatable";
        } else if (S1!= S4) {
            text = "These parts are not compatable";
        } 
    
    
    
    
    }
    </script>
    <button onclick="compatable()">Submit</button>
    
    </head>
    <body>
    
    <h1>Pick your CPU</h1>
    <hr />
    Choose Your Brand
    	<select id="Select1" name="Select1" onchange="populate(this.id,'Select2')">
    		<option value=""></option>
    		<option value="Intel">Intel</option>
    		<option value="AMD">AMD</option>
    	</select>
    <hr />
    
    Choose Your Model
    	<select id="Select2" name="Select2">
    <hr />
    
    
    <P>Pick your GPU</p>
    <hr />
    Choose Your Brand
    </select>
    	<select id="Select3" name="Select3" onchange="populate2(this.id,'Select4')">
    		<option value=""></option>
    		<option value="Intel">Intel</option>
    		<option value="AMD">AMD</option>
    	</select>
    <hr />
    Choose Your Model
    	<select id="Select4" name="Select4">
    <hr />
    
    
    </body>
    </html>

1 个答案:

答案 0 :(得分:0)

下面是一个函数,用于根据S1.value选择正确的兼容性测试,然后在下面是测试S3.value是否与S1.value兼容的函数。

示例函数Compatibility_Test_I7()创建一个数组,其中包含与I7兼容的组件,然后循环查看S3.value是否等同于兼容组件数组中的任何对象。

function Call_Test() {



switch(S1.value) {
    case "I7":
         Compatibility_Test_I7();
        break;
    case "I5":
        Compatibility_Test_I5();
        break;
    case "RX500":
        Compatibility_Test_RX500();
        break;
    case "RX100":
        Compatibility_Test_RX100();
        break;
`       default:
            break;
    }

}




 function Compatibility_Test_I7() {
     var Compatible_I7 = ['GTX1080', 'GTX1050']


    (step = 0; step < 5; step++)
    for (i = 0; i < Compatible_I7.length; i++) {
     if (Compatible_I7(i) == S3.value ) {
        return "Compatible Configuration";
      } else {
        /* Nothing *\
      }
    }
    }