Javascript选择选项应用程序_Javascript

Javascript选择选项应用程序

javascript

Javascript选择选项应用程序,javascript,Javascript,我正在尝试仅使用Javascipt创建select应用程序。我在网上知道了这个密码 <!DOCTYPE html> <html> <head> <title>Select Options</title> </head> <body> <h2>Choose your car</h2> <hr> Choose Car Make: <select id="slct1

我正在尝试仅使用Javascipt创建select应用程序。我在网上知道了这个密码

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


选择选项
选择你的车

选择汽车品牌：
现代
本田
玛鲁蒂

选择车型
函数填充（s1、s2）{
变量s1，s2；
s1=document.getElementById（s1）；
s2=document.getElementById（s2）；
如果（s1.值=='Hyundai'）{
optionArray=[‘请选择汽车’、‘i10’、‘i20’、‘Verna’]
}否则
如果（s1.值=='Honda'）{
optionArray=[‘请选择汽车’、‘惊奇’、‘爵士乐’、‘城市’]
}否则
如果（s1.value=='Maruti'）{
optionArray=['请选择汽车'，'Swift'，'Dezire'，'Ciaze']
}
对于（变量i=0；i


这是我现在用来编写此应用程序的完整代码，但我每次从car make**选择选项，当我从car make**选择另一个选项时，它不会从car model中删除以前的选项，并且列表会增加，因此每次我从car make选择选项时，都会增加添加到任何内容的列表中
s2.appendChild（createNewEl）添加到任何内容的列表中
首先，您需要导入jQuery。将其粘贴在
标记之间：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我对它进行了测试，效果很好。这是完整的工作代码
<!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。将其粘贴在
标记之间：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我对它进行了测试，效果很好。这是完整的工作代码
<!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>

我还在
循环中为..尝试了这个，但没有使用append，结果是一样的。你那边有什么解决方案吗？我也在
循环中为..尝试了这个，但没有使用append，结果是一样的。你那边有什么解决方案吗？谢谢，它奏效了，但是除了你提供的另外两种方法之外，还有其他方法吗？因为我现在正在学习Javascript，我想我已经部分理解了while语句。我们可以使用if语句或其他语句吗？谢谢，它起作用了，但是除了您提供的其他两种方法之外，还有其他方法吗？因为我现在正在学习Javascript，我想我部分理解while语句。我们可以用if语句或其他什么东西吗？