Question

我有一个带有选择框的表单，如下所示：

 <select id="school">
   <option>Choose school</option>
   <option value="656462">test</option>
   <option value="653671">test1</option>
   <option value="653688">test2</option>        
 </select>

如何从上述选项中获取选项值？我想使用下面jQuery代码中的值：

 $("select#school").change(function(){

    $("select#locatie").html('<option value="">Course</option>');
    $("select#lijst").html('<option value="">List</option>');

    $("#cat1").html($("#school option:selected").text());
    $("#cat2").html('Course');
    $("#cat3").html('List');

    var options = '';
    $(function(){
      $("select#school").change(function(){

        $("select#location").html('<option value="">Location</option>');
        $("select#list").html('<option value="">List</option>');

        $("#cat1").html($("#school option:selected").text());
        $("#cat2").html('Course');
        $("#cat3").html('List');

        var options = '';


        if($("#school").val() == 656462){   
            options += '<option value="">Course</option>';
            options += '<option value="12345">test1</option>';   
        }  
        if($("#school").val() == 653671){   
            options += '<option value="">Course</option>';
            options += '<option value="89887">test2</option>';   
        }
        if($("#school").val() == 653688){   
            options += '<option value="">Course</option>';
            options += '<option value="548798">test25</option>';   
        }              

        $("select#locatie").html(options);

  });
});

基本上，对于每个选项值，都有一个新的if语句。问题是选择框中充满了大量自动生成的选项值。所以现在我必须手工完成所有事情，而不是自动生成if语句。

所以我尝试做的是： 1）从中获取所有选项值 2）使用这些选项值为每个值

创建一个if语句

任何帮助非常感谢

Answer 1

如果我了解您要执行的操作，您是否希望根据第一个选择的结果为第二个选择创建新选项？我可能会在对象的数组中存储可能的选项：

var courseSelection = {
    "656462": [ { value: "123456", text: "Course 1" }, { value: "234567", text: "Course 2" } ],
    "653671": [ { value: "345678", text: "Course 3" }, { value: "456789", text: "Course 4" } ],
    "653688": [ { value: "567890", text: "Course 5" }, { value: "678901", text: "Course 6" } ]
};

然后在你的更改事件处理程序中，（如你所述）你可以遍历数组中的每个对象来构建适当的列表：

$("select#school").change(function(){

    var options = '',
        courses = courseSelection[$(this).val()];

    $('select#course').empty();

    options += '<option value="">Course</option>';

    $.each(courses, function() {
        options += '<option value="' + this.value + '">' + this.text + '</option>';
     });

    $('select#course').append(options).show();

});

JSFiddle描述我的意思。如果我在这里得到错误的结局，请告诉我！

Answer 2

重新思考你的方法。在这种情况下，我将执行以下操作之一：

在#school change事件中，将所选值发送到服务器以获取匹配选项列表;或
如果要在客户端执行所有操作，请为每个可能的值创建一个数组，以提供匹配的选项。通过这种方式，您可以避免所有这些丑陋的if语句。

从select中获取ID并在if语句中使用它们

2 个答案: