Question

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

如果我选择其中一个名为phone的类别，则项目下拉列表应具有此功能。（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代码连接？

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

Answer 2

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

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

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

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

如何将Javascript代码放入HTML中

2 个答案:

选项1

选项2