Switching depending on Dropdown option

问题

I have two text files s1.text' and s2.text.

s1.text has the following text inside.

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

s2.text has the following text inside.

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

In the same folder, I have the index.html with the following content.

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

I can load s1.text or s2.text by the code

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

in the pace of *. However, I can not make a switch to load s1.text or s2.text depending on the value of sctdd. Is it possible to load s1 if value is 223 and s2 if value is 224

回答1:

This will do the trick:

$(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:

        }
    });
});

回答2:

Yes it is possible. load files in on change event handler as per value selected in sctdd

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

But as @Koby Douek said, it will be more easy if you rename your file name to the value of options. So that if you add / remove options then you don't have to change your code. Lets say, your file names are 223.txt and 224.txt then jquery script will be

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

回答3:

You may go for data- attribute, as follows:

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

In JS:

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

Edited

In-case you wish to specify multiple files.

Option 1, use more attributes:

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

Option 2, use 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>

来源：https://stackoverflow.com/questions/35988072/switching-depending-on-dropdown-option

标签

jquery

dropdown