2015-02-24 27 views
0

我是尝试使用javascript,我是初学者。我试图从上一个下拉菜单中更改值时添加下拉菜单。 我想显示完全相同的下拉菜单,当前一个有一个值。所以,当你有3个下拉菜单与价值的,你有4个下拉菜单的使用相同的选项等当前面的下拉菜单选择了一些东西时,javascript显示下拉菜单

所以我用oninput这样的:

<select name="select" oninput="myFunction()"> 

,这是我从W3Schools的使用功能:

function myFunction() { 
    document.getElementById("demo").innerHTML = "<tr><td> 
    <select name='select' id='test' oninput='myFunction()'> 
    <option value='test'>test</option> 
    <option value='test'>test</option> 
    </select></td></tr>"; 
} 

这是demo ID:

<table><div id="demo"> </div></table> 

但我有2个问题。

  1. 当试图使用它,它不会工作。然而它的工作,当我使用:

document.getElementById("demo").innerHTML = "test"

  • 这不表示相同的下拉菜单,因为我有原来的下拉菜单的选择在一个for但我不能将<div id="demo"> </div>放在for循环中,因为它会显示下拉菜单中的选项数量。
  • 我的问题(S):

    有没有产生一个JavaScript函数完全相同的下拉菜单的方法吗?

    如果不是,我的代码出了什么问题。

    +0

    @DarrenSweeney对不起,我复制了那个错误。在我的实际代码中,它确实有''' – Loko 2015-02-24 08:37:55

    +0

    这张表是从哪里开始的?你的innerHTML以''开头,但我没有看到'

    ' – 2015-02-24 08:39:45

    +0

    @DarrenSweeney是的,它只是保留所有的下拉菜单在表中,所以表不在功能本身 – Loko 2015-02-24 08:49:31

    回答

    0

    你必须使用jQuery ajax。把你的下拉菜单中的HTML(例如dropdown.html)

    然后用这个:

    $("#id_of_first_dropdown").change(function(){ 
        $("#div_where_u_want_new_select").load("path/to/dropdown.html", function(){ 
         $("#div_where_u_want_new_select").fadeIn(); 
        }); 
    }); 
    

    在HTML:

    <select name="..."> 
        <option>..</option> 
    </select> 
    <div id="div_where_u_want_new_select"></div> 
    

    CSS:

    #div_where_u_want_new_select { 
        display: none; 
    } 
    
    在dropdown.html

    <select name="..."> 
        <option>..</option> 
    </select> 
    

    有了这个如果你想使用这个无限的你可以用它只有一次。所以可能的答案之一是改变JS:

    $("#id_of_first_dropdown").change(function(){ 
         $.ajax({ 
         url: "path/to/dropdown.html", 
         success: function(data){ 
          $("#div_where_u_want_new_select").append(data); 
          $("#div_where_u_want_new_select").fadeIn(); 
         } 
         }) 
        }); 
    

    HTML:

    <select name="..."> 
         <option>..</option> 
        </select> 
        <div id="div_where_u_want_new_select0"></div> 
    

    和下拉。html

    <select name="..."> 
        <option>..</option> 
    </select>