Javascript选择选项应用程序

我正在尝试仅使用Javascipt创建选择应用程序。我在互联网上了解了这段代码

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

这是我现在用来编写此应用程序的完整代码，但是每次我从汽车制造**中选择选项时，当我从汽车制造**中选择另一个选项时，

它不会从汽车模型中删除以前的选项，并且列表会增加，因此每次我从汽车制造中选择选项时

首先，你需要导入 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);
}

s2.appendChild(createNewEl);添加到

任何列表中

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_node_appendchild

相关内容

最新更新

热门标签：