如何将javascript代码包含在一个答案

【问题标题】：How to include javascript code in a如何将javascript代码包含在一个
【发布时间】：2016-02-26 01:23:26
【问题描述】：

我正在尝试将 javascript 代码添加到我的 HTML 页面中，但是我做不到。
我在小提琴上试过了，它有效。此链接 (http://jsfiddle.net/kF2uK/2/) 上有一个工作代码示例。

我的html代码和javascript如下，你能告诉我如何实现它

function buttonState(){
    $("#timeslots").each(function(){
        $('#submit').attr('disabled', 'disabled');
        if($(this).val() == "" ) return false;
        $('#submit').attr('disabled', '');
    })
}

$(function(){
    $('#submit').attr('disabled', 'disabled');
    $('#timeslots').change(buttonState);
})

    <!DOCTYPE html>
	
	<body class="container-fluid">	
            <div class="container">
                            
                    <form>
                        <div class="form-horizontal">
                            <div class="form-group">
                                <label class="col-md-2 control-label">Day *</label>
                                <div class="col-md-4">
                                    <select class="form-control" id="day">
                                        <option selected>Select</option>
                                        <option>Monday</option>
                                        <option>Tuesday</option>
                                        <option>Wednesday</option>
                                        <option>Thursday</option>
                                        <option>Friday</option>
                                    </select>
                                </div>
                            </div>
                                                        
                            <div class="form-group">
                                <label class="col-md-2 control-label">Time *</label>
                                <div class="col-md-4">
                                    <select class="form-control" id="timeslots">
                                        <option selected>Select (5 Slots Available)</option>
                                        <option disabled>09.00</option>
                                        <option>10.00</option>
                                        <option disabled>11.00</option>
                                        <option>12.00</option>
                                        <option>13.00</option>
                                        <option disabled>14.00</option>
                                        <option>15.00</option>
                                        <option disabled>16.00</option>
                                        <option>17.00</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-offset-2 col-md-4">
                                <button class="btn btn-success btn-block" id="submit">Submit</button>
                                </div>
                            </div>
                        </div>
                    </form>
            </div>
            
        </body>

【问题讨论】：

您的<script> 标签在哪里？如果你没有，那是你的问题。

标签： javascript jquery html add

【解决方案1】：

HTML 需要一个<script src="pathToJavaScript"></script> 标记。

【讨论】：

【解决方案2】：

将 javascript 放入名为 myscript.js 的文件中

    // this is myscript.js
    function buttonState(){
    $("#timeslots").each(function(){
        $('#submit').attr('disabled', 'disabled');
        if($(this).val() == "" ) return false;
        $('#submit').attr('disabled', '');
    })
}

$(function(){
    $('#submit').attr('disabled', 'disabled');
    $('#timeslots').change(buttonState);
})

将 html 放在不同的文件中保存为 index.html

<!-- this is index.html -->
<!DOCTYPE html>

    <body class="container-fluid">  
            <div class="container">

                    <form>
                        <div class="form-horizontal">
                            <div class="form-group">
                                <label class="col-md-2 control-label">Day *</label>
                                <div class="col-md-4">
                                    <select class="form-control" id="day">
                                        <option selected>Select</option>
                                        <option>Monday</option>
                                        <option>Tuesday</option>
                                        <option>Wednesday</option>
                                        <option>Thursday</option>
                                        <option>Friday</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-2 control-label">Time *</label>
                                <div class="col-md-4">
                                    <select class="form-control" id="timeslots">
                                        <option selected>Select (5 Slots Available)</option>
                                        <option disabled>09.00</option>
                                        <option>10.00</option>
                                        <option disabled>11.00</option>
                                        <option>12.00</option>
                                        <option>13.00</option>
                                        <option disabled>14.00</option>
                                        <option>15.00</option>
                                        <option disabled>16.00</option>
                                        <option>17.00</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-offset-2 col-md-4">
                                <button class="btn btn-success btn-block" id="submit">Submit</button>
                                </div>
                            </div>
                        </div>
                    </form>
            </div>

        </body>

在 index.html 中，在 body 标记关闭之前添加脚本标记（一个封闭的 body 标记如下所示：</body>），源指向您新创建的 javascript 文件。

<script src="myscript.js"></script>
</body>

但是，因为您想使用 jquery，您还必须将该脚本添加到 html 文件中。您可以下载 jquery 或使用 google cdn。它需要包含在您的脚本标记之前，因为您的脚本使用 jquery。这个例子使用了cdn，所以它可以工作，但是如果你在一个实际的项目中使用jquery，我建议你把它下载到你的项目目录中，然后像你做myscript.js一样添加它

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

【讨论】：

我所做的和你提到的完全一样，问题是，即使从