Question

我正在学习编程，我已经掌握了我的第一个网站。我的下拉列表只允许工程。请帮帮我。因为我无法理解为什么它不起作用。提前谢谢。

这是我尝试过的java脚本代码。

$(document).ready(function(){


    var farming = {
        program: "Agriculture",
        course: "Farming",
        tuition: 800000
    };

    var consumption = {
        program: "Agriculture",
        course: "Animal consumption",
        tuition: 800000
    };

    var livestock = {
        program: "Agriculture",
        course: "Livestock",
        tuition: 800000
    };

    var crop = {
        program: "Agriculture",
        course: "Crop growing",
        tuition: 800000
    };

    var coding = {
        program: "Ict",
        course: "Computer coding",
        tuition: 1000000
    };

    var science = {
        program: "Ict",
        course: "Computer science",
        tuition: 1000000
    };

    var systems = {
        program: "Ict",
        course: "Information systems",
        tuition: 1000000
    };

    var programming = {
        program: "Ict",
        course: "Computer programming",
        tuition: 1000000
    };

    var mechanical = {
        program: "Engineering",
        course: "Mechanical Engineering",
        tuition: 1200000
    };

    var electrical = {
        program: "Engineering",
        course: "Electrical Engineering",
        tuition: 1200000
    };
    var telecom = {
        program: "Engineering",
        course: "Telecom Engineering",
        tuition: 1200000
    };
    var civil = {
        program: "Engineering",
        course: "Civil Engineering",
        tuition: 1200000
    };

    var courses = [mechanical , electrical , telecom, civil , consumption , livestock , farming , crop , coding , programming , science , systems]

    //var courses = ["animal consumption" , "livestock" , "farming" , "crop growing"];

    $('#program_selector').change(function() {

        if ($('#program_selector').val("2")){
            //clear all options
            $("#course_selector").find('option').remove().end()
            $("#course_selector").empty();
            //then load engineering courses
            //var selectedCourses = [];
            for (var i = 0; courses[i]; i++){
                if (courses[i].program == "Engineering") {
                    $("#course_selector").append('<option>' + courses[i].course + '</option>');

                }
            }
        }

        else if ($('#program_selector').val("4")){
            //clear all options
            $("#course_selector").find('option').remove().end();
            $("#course_selector").empty();
            //then load the agriculture courses
            for (var i = 0; courses[i]; i++){
                if (courses[i].program == "Agriculture") {
                    $("#course_selector").append('<option>' + courses[i].course + '</option>');

                }
            }
        }
        else if ($('#program_selector').val("3")){
            //clear all options
            $("#course_selector").find('option').remove().end();
            $("#course_selector").empty();
            //then load ICT courses
            //var selectedCourses = [];
            for (var i = 0; courses[i]; i++){
                if (courses[i].program == "Ict") {
                    $("#course_selector").append('<option>' + courses[i].course + '</option>');

                }
            }
        }
    });
});

Answer 1

您没有比较，您正在为其分配值：

  if ($('#program_selector').val("2")){

请改为尝试：

$('#program_selector').change(function() {
  var val = $(this).val();
  if("2" === val) {
     //
  } else if("4" === val) {
     //
  } else {
    //
  }
});

Answer 2

使用键/值访问

会好得多

var courses = {
  "Agriculture" : {
    livestock: {
    }
  },
  "ICT" : {
    "computer programming" : {
    }
  }
}

现在您可以访问

courses[program][type]

或者使用数组：

var courses = [
  { "Please select":""},
  { livestock : ...},
  { ...... : ..... }
]

然后课程[sel.selectedIndex]匹配课程

下拉列表不起作用

2 个答案: