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");

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

Answer 1

是的，这是可能的。根据{{1}}

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

sctdd

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

$(function () {
    $('#sctdd').change(function () {
          var value = $(this).val();
          if(val = "223")
            $('#crsdd').load("s1.txt");
          else if(val = "224")
            $('#crsdd').load("s2.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

<强>被修改

如果您希望指定多个文件。

选项1，使用更多属性：

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

切换取决于下拉选项

3 个答案: