如何将 Javascript 代码放入 HTML [关闭]答案

【问题标题】：How to put Javascript code in HTML [closed]如何将 Javascript 代码放入 HTML [关闭]
【发布时间】：2014-04-30 23:47:21
【问题描述】：

在那个项目中，我想创建两个下拉列表（类别、项目）。如果我选择名为汽车的类别之一，那么项目下拉列表应该有这个。（本田、沃尔沃、日产）

如果我选择名为电话的类别之一，那么项目下拉列表应该有这个。（iPhone、三星、诺基亚）工作演示http://jsfiddle.net/kasperfish/r7MN9/3/（使用 jquery）

cars = new Array("Mercedes", "Volvo", "BMW", "porche");
phones = new Array('Samsung', 'Nokia', 'Iphone');

populateSelect();

$(function () {

    $('#cat').change(function () {
        populateSelect();
    });

});


function populateSelect() {
    cat = $('#cat').val();
    $('#item').html('');


    if (cat == 'car') {
        cars.forEach(function (t) {
            $('#item').append('<option>' + t + '</option>');
        });
    }

    if (cat == 'phone') {
        phones.forEach(function (t) {
            $('#item').append('<option>' + t + '</option>');
        });
    }

}

但我不知道如何将html代码与java代码或jquery代码连接起来？

【问题讨论】：

没有JAVA代码，只有javascript
您的代码运行良好，还有什么预期？
哦，是的，请帮我链接
@PatrickQ 听起来不太清楚... ;-)
我不明白这个问题。您在小提琴中连接了 HTML 和 javascript？您有一些 HTML 和一些 javascript - 现实中唯一的区别是 javascript 需要位于 <script> 标记中。你能澄清一下你不能做/需要知道的事情吗？

标签： javascript jquery html drop-down-menu

【解决方案1】：

首先你需要像这样导入带有<script>标签的JQuery库：

<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>

然后你可以把你的脚本放在<script>标签之间，或者创建一个单独的.js文件，然后像导入JQuery库一样导入它。

选项 1

保存文件并像这样导入

<script src="myFile.js" type="text/javascript"></script>

选项 2

把你的代码放在<script>标签之间

<script type="text/javascript">

    cars=new Array("Mercedes","Volvo","BMW","porche");
    phones=new Array('Samsung','Nokia','Iphone');

    populateSelect();

    $(function() {

          $('#cat').change(function(){
            populateSelect();
        });

    });


    function populateSelect(){
        cat=$('#cat').val();
        $('#item').html('');


        if(cat=='car'){
            cars.forEach(function(t) { 
                $('#item').append('<option>'+t+'</option>');
            });
        }

        if(cat=='phone'){
            phones.forEach(function(t) {
                $('#item').append('<option>'+t+'</option>');
            });
        }

    } 

</script>

【讨论】：

【解决方案2】：

您可以在 .js 中编写代码并将其链接到：

<script src="yourCode.js"></script>

或者在 html 中编写你的 javascript 代码：

<script type="text/javascript">
//Your javascript code here
</script>

【讨论】：