1. 首页
  2. 问答
  3. Javascript选择选项应用程序

Javascript选择选项应用程序

2017-04-02 87 views
0

我正在尝试仅使用Javascipt创建选择应用程序。我知道互联网Javascript选择选项应用程序

<!DOCTYPE html> 
<html> 
<head> 
    <title>Select Options</title> 
</head> 
<body> 

<h2>Choose your car</h2> 
<hr> 

Choose Car Make: 
<select id="slct1" onchange="populate(this.id,'slct2')"> 
    <option value=""></option> 
    <option value="Hyundai">Hyundai</option> 
    <option value="Honda">Honda</option> 
    <option value="Maruti">Maruti</option> 
</select> 

<hr> 

Choose Car Model 
<select id="slct2" ></select> 

</body> 

<script type="text/javascript"> 

    function populate(s1,s2){ 
     var s1,s2; 
     s1 = document.getElementById(s1); 
     s2 = document.getElementById(s2); 

     if(s1.value=='Hyundai'){ 
      optionArray=['Please Select Car','i10','i20','Verna'] 
     } else 
     if(s1.value=='Honda'){ 
      optionArray=['Please Select Car','Amaze','Jazz','City'] 
     } else 
     if(s1.value=='Maruti'){ 
      optionArray=['Please Select Car','Swift','Dezire','Ciaze'] 
     } 


     for (var i = 0; i < optionArray.length; i++) { 
     var store = optionArray[i]; 
     var createNewEl = document.createElement('option'); 
     createNewEl.innerHTML = store; 
     s2.appendChild(createNewEl); 
     } 

    }  

</script> 
</html>

这是一个完整的代码我现在用它来写这篇apllication这个代码，但我每次我选择汽车品牌的选择**当我选择另一个选项fromcar做**，它不会从汽车模型删除之前的选项和列表得到提高等等，每次我选择汽车选项使

来源

2017-04-02 Aseem Sharma

回答

2

杉木st，你需要导入jQuery。 <head>标签之间粘贴此：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

你的脚本追加新值结束的选择列表中，因此它必须删除所有老值。

$("#slct2 option").remove();

我测试了它，对我来说工作正常。这是完整的工作代码。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Select Options</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
</head> 
<body> 

<h2>Choose your car</h2> 
<hr> 

Choose Car Make: 
<select id="slct1" onchange="populate(this.id,'slct2')"> 
    <option value=""></option> 
    <option value="Hyundai">Hyundai</option> 
    <option value="Honda">Honda</option> 
    <option value="Maruti">Maruti</option> 
</select> 

<hr> 

Choose Car Model 
<select id="slct2"></select> 

</body> 

<script type="text/javascript"> 

    function populate(s1,s2){ 

     var s1,s2; 
     s1 = document.getElementById(s1); 
     s2 = document.getElementById(s2);   

     $("#slct2 option").remove(); 

     if(s1.value=='Hyundai'){ 
      optionArray=['Please Select Car','i10','i20','Verna'] 
     } else 
     if(s1.value=='Honda'){ 
      optionArray=['Please Select Car','Amaze','Jazz','City'] 
     } else 
     if(s1.value=='Maruti'){ 
      optionArray=['Please Select Car','Swift','Dezire','Ciaze'] 
     } 

     for (var i = 0; i < optionArray.length; i++) { 
      var store = optionArray[i]; 
      var createNewEl = document.createElement('option'); 
      createNewEl.innerHTML = store; 
      s2.appendChild(createNewEl); 
     } 
    }  

</script> 
</html>

编辑： 如果你不想使用jQuery只需更换这$("#slct2 option").remove();本：

while (s2.firstChild) { 
    s2.removeChild(s2.firstChild); 
}

来源

2017-04-02 13:38:44 szymon

+0

谢谢 它的工作，但除了你提供的其他两个方法之外，还有更多的方法，因为现在写我在我学习Javascript的初步阶段，我想我部分理解了while语句。如果有**语句或其他的东西，我们可以使用like **吗？ –

相关问题

 相关问题