根据下拉选项切换

Question

我有两个文本文件 s1.text' 和 s2.text。

s1.text里面有下面的文字。

<option value='val11'>text11</option>
<option value='val12'>text12</option>
<option value='val13'>text13</option>

s2.text里面有下面的文字。

<option value='val21'>text21</option>
<option value='val22'>text22</option>
<option value='val23'>text23</option>

在同一个文件夹中，我有 index.html 内容如下。

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8'>
        <title>Course Check List</title>
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
        <script>


            $(function () {
                $('#sctdd').change(function () {
                    *
                });
            });
        </script>
    </head>
    <body>
        <form name='form_last'>
            <br>
            <select id='sctdd' name='sct'>
                <option value='224' selected>2015-2016 Spring</option>
                <option value='223'>2015-2016 Fall</option>
        </select>
            <select id='crsdd' name='crs'>
        </select>
            <br>
            <input type='submit' name='tus' value='Submit'>
        </form>
    </body>
</html>

我可以通过代码加载s1.text或s2.text

$('#crsdd').load("s1.txt");

在*.的步伐中。但是，我无法根据 sctdd 的值切换到加载 s1.text 或 s2.text。是否可以加载 s1 如果值为 223 和 s2 如果值为 224

Answer 1

是的，这是可能的。根据 sctdd

中选择的值在更改事件处理程序中加载文件

$(function () {
    $('#sctdd').change(function () {
          var value = $(this).val();
          if(val = "223")
            $('#crsdd').load("s1.txt");
          else if(val = "224")
            $('#crsdd').load("s2.txt");
   });
});

但正如@Koby Douek 所说，如果将文件名重命名为选项的值，将会更容易。因此，如果您添加/删除选项，则不必更改代码。比方说，您的文件名是 223.txt 和 224.txt 那么 jquery 脚本将是

 $(function () {
      $('#sctdd').change(function () {
              var value = $(this).val();
              $('#crsdd').load(value+".txt");
       });
    });

Answer 2

这样做就可以了：

$(function () {
    $('#sctdd').change(function () {
        var selectedOption = $(this).val();

        switch (selectedOption) {
            case '224':
                $('#crsdd').load("s1.txt");
                break;
            case '223':
                $('#crsdd').load("s2.txt");    
                break;
            default:

        }
    });
});

Answer 3

您可以选择data-属性，如下：

<option value='224' data-file='s1.txt' selected>2015-2016 Spring</option>
<option value='223' data-file='s2.txt'>2015-2016 Fall</option>

在 JS 中：

$('#sctdd').change(function () {
    $('#crsdd').load($(this).find('option:selected').data('file'));
}).trigger('change'); //will load the file by-default on page load

已编辑

以防您希望指定多个文件。

方案一，使用更多属性：

<option value='224' data-file1='s1.txt' data-file2='u1.txt' selected>2015-2016 Spring</option>
<option value='223' data-file1='s2.txt' data-file2='u2.txt'>2015-2016 Fall</option>

选项 2，使用 CSV：

<option value='224' data-files='s1.txt, u2.txt' selected>2015-2016 Spring</option>
<option value='223' data-files='s2.txt, u2.txt'>2015-2016 Fall</option>

根据下拉选项切换

Switching depending on Dropdown option

jquery

dropdown