jquery 函数不工作？答案

【问题标题】：jquery function is not working?jquery 函数不工作？
【发布时间】：2014-03-30 17:47:50
【问题描述】：

我有一个选择字段。当用户从字段中选择选项时，我想根据用户选择显示输出。例如，如果用户选择 2，我想显示 'hello world' 两次。这是我到目前为止所做的。

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 

 <p>Select Option:<select id="noAct">
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
       <option value="4">4</option
     </select>


<p id="tables"></p> 

<script>
    function displayTable()
    {
        var value = $("#noAct").val();

        //for loop to display the no of tables required
        for ( var i=0; i<value; i++ )
        {
            //display the table
            $("#tables").html("<b>Hello World</b>");

        }
    }

    $( "select" ).change( displayTable );
    displayTable();
</script>

我没有得到任何输出或任何输出。有人可以帮我吗？

【问题讨论】：

如何将change 和displayTable() 放入dom 就绪处理程序中？
语法错误、noAct ID 上缺少引号、未关闭的选项标签等。
我是 jquery 新手，所以如果你能评估我的解决方案会很棒

标签： jquery forms select

【解决方案1】：

修复语法错误，并在循环中使用append()，而不是html()，因为它会在每次迭代时覆盖内容

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 

<p>Select Option:</p>
<select id="noAct">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
</select>


<p id="tables"></p> 

<script>
    function displayTable() {
        var value = $("#noAct").val();

        $("#tables").empty();

        for ( var i=0; i < value; i++ ) {
            $("#tables").append("<b>Hello World</b><br />");
        }
    }

    $( "select" ).change( displayTable );
    displayTable();
</script>

FIDDLE

【讨论】：

【解决方案2】：

尝试如下，

$(document).ready(function() {

     $( "select" ).change( displayTable );

});

【讨论】：

$(document).ready( 是不必要的，您正在调用 displayTable() 并将返回值 (undefined) 传递给 change 而不是函数。

【解决方案3】：

试试这个：

<script>

$(document).ready(function(){
    $( "#noAct" ).on( 'change', function(){
        var value = $(this).val();

        //for loop to display the no of tables required
        $("#tables").html();
        for ( var i=0; i<value; i++ )
        {
            //display the table
            $("#tables").append("<b>Hello World</b><br />");

        }
    } );
});
</script>

【讨论】：