Home>

I want to switch between display and non-display with the select box.

It's almost in shape
I will post some parts that do not work well.

Reference) https://macoblog.com/select_show_and_hide/
We have created it with reference to this site.

<!-Elements that can be displayed/hidden->
<ul>
<li>Hokkaido</li>
<li>Tokyo</li>
<li>Osaka</li>
<li>Hyogo</li>
<li>Kyoto</li>
</ul>
<!-Trigger to narrow down->
<select>
<option>All</option>
<option>Hokkaido</option>
<option>Tokyo</option>
<option>Osaka</option>
<option>Hyogo</option>
<option>Kyoto</option>
</select>
.hide {
 /* Used to switch the display * /
  display: none;
}
$('.select'). on ('change', function () {
  // Get text (example: Hokkaido)
  var area = $(this) .children (': selected'). text ();
  $('.area'). each (function () {
    // Hide everything (initialize)
    $(this) .addClass ('hide');
    // If'all'is selected
    if (area =='all') {
      // indicate
      $(this) .removeClass ('hide');
    // If the text (example: Hokkaido) matches
    } else if ($(this) .html (). match (area)) {
      // indicate
      $(this) .removeClass ('hide');
    }
  });
});


For example, if you select "Hokkaido" once and then select "All" above
Nothing will be displayed.

How can I get them all displayed?

Please teach. Thank you.

Is this okay if I read Js as a separate file?

// Get text (example: Hokkaido)
  var area = $(this) .children (': selected'). text ();
  $('.area'). each (function () {
    // Hide everything (initialize)
    $(this) .addClass ('hide');
    // If'all'is selected
    if (area =='all') {
      // indicate
      $(this) .removeClass ('hide');
    // If the text (example: Hokkaido) matches
    } else if ($(this) .html (). match (area)) {
      // indicate
      $(this) .removeClass ('hide');
    }
  });
});
  • Answer # 1

    Good evening.
    As another person has already written, this sample works fine.
    When reading a JavaScript file as an external file, basically libraries such as jQuery are read in the head. On the contrary, I think that the code using $etc. should be written at the very end of the body regardless of whether it is external or internal.

    This is because the browser does not load the entire page at once, but in small increments from the top. For example, if you write the code using $before the declaration of the li element or option element of each prefecture, the li element or option element of each prefecture has not been loaded yet (not yet from the browser). Attempts to set the event (resulting in no event being set)
    Therefore, when writing the code for the element written in html, it is safe to write it before.
    Alternatively, you can write it in the head using one of the following methods.

    // Method ①
    window.addEventListener ('load', function () {
        //code
    });
    // Method ②
    $(document) .ready (function () {
        //code
    });


    This is after the page has finished loading to the end//codeIt is a code that reserves to execute the contents written in.
    * Even in this case, I think I saw somewhere that it is a good idea to load libraries such as jQuery in the head and before the code you write yourself.

    I'm glad if you can use it as a reference.