Question

我尝试在我的HTML页面中添加javascript代码但是我无法执行此操作。我在小提琴上尝试过，它有效。工作代码的示例就像在此链接上一样（http://jsfiddle.net/kF2uK/2/）。

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

＆＃13;

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);
})

＆＃13;

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

＆＃13;

Answer 1

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

Answer 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>），源指向新创建的javascript文件。

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

但是，因为你想使用jquery，你也必须将该脚本添加到html文件中。您可以下载jquery或使用谷歌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>

如何在一个包含javascript代码

2 个答案: