Home>

I'm looking for a jQuery plugin that automatically switches the items in another select box when the value of the select box is changed in the wordpress inquiry home.
The plug-in called Dependent Selects on the following page, when you change the value of the select box, another select box appears and I thought that you can make a number of items that automatically switch items, but it does not support CDN and files from the server You need to pull. If possible, I don't want to put files on the server so much, so does anyone know of a jquery plugin that can be pulled using a CDN?

This is a plugin that allows you to do what I want.
https://fit-jp.com/selectbox-jq/
As what I want to do
1 Select with or without bus use with selectbox → If yes, the bus route and selectbox will appear. Without it, the bus route selectbox does not appear

Select the next bus route when 2 bus use is selected → In the case of 1 route, the select box with the bus stop of 1 route appears. In the case of 2 routes, a select box with a 2-route bus stop will appear.
↑↑↑
I tried to create part 2 with the following code, but from the beginning the select box of the bus route and the two bus routes at the stop is still displayed.

Currently I created it without jquery, but I understand that there are up to 2 selectboxes, but there is a way to increase it to 3 or 4.
I don't know, and I want to make the next select box appear when I select the first select box.
I didn't know how to do it and was thinking of using a plugin
The current code is below

<select name = "Bus route (only for those who want a bus)">
<option value = "" selected = "selected">Please select</option>
<option value = "(1) Route">(1) Route</option>
<option value = "② route">② route</option>
</select>
<select name = "bar" disabled = "">
<option value = "" selected = "selected">Please select</option>
<option value = "3-chome intersection destination" data-val = "① route">3-chome intersection destination</option>
<option value = "Before Porsche" data-val = "① Route">Before Porsche</option>
<option value = "in front of South Post Office" data-val = "① Route">In front of South Post Office</option>
<option value = "Before Summit" data-val = "② Route">Before Summit</option>
<option value = "before the intersection" data-val = "② route">before the intersection</option>
<option value = "in front of the shrine" data-val = "② route">in front of the shrine</option>
</select>
<script>
var $children = $('.children');// Put the element of the stop in a variable.
var original = $children.html ();// Save the original to remove unnecessary option elements in later events
// An event occurs when the select element on the local side changes
$('.form-control'). change (function () {
  // Get the value of the selected direction and put it in a variable
  var val1 = $(this) .val ();
  // Put .html (original) to restore the deleted element
  $children.html (original) .find ('option') .each (function () {
    var val2 = $(this) .data ('val');// Get the value of data-val
    // Remove elements with data-val different from value
    if (val1! = val2) {
      $(this) .not (': first-child'). remove ();
    }
  });
  // If the select element on the direction side is not selected, disable the stop
  if ($(this) .val () == "") {
    $children.attr ('disabled','disabled');
  } else {
    $children.removeAttr ('disabled');
  }
});
</script>
  • Answer # 1

    I'll play with html a little, but what about something like the following?

    <select name = "Bus route (only for those who want a bus)" data-child = "# 1">
    <option value = "" selected = "selected">Please select</option>
    <option value = "(1) Route">(1) Route</option>
    <option value = "② route">② route</option>
    </select>
    <select id = "1" name = "bar" data-child = "# 2">
    <option value = "" selected = "selected">Please select</option>
    <option value = "3-chome intersection destination" data-val = "① route">3-chome intersection destination</option>
    <option value = "Before Porsche" data-val = "① Route">Before Porsche</option>
    <option value = "in front of South Post Office" data-val = "① Route">In front of South Post Office</option>
    <option value = "Before Summit" data-val = "② Route">Before Summit</option>
    <option value = "before the intersection" data-val = "② route">before the intersection</option>
    <option value = "in front of the shrine" data-val = "② route">in front of the shrine</option>
    </select>
    <select id = "2" name = "foo">
    <option value = "" selected = "selected">Please select</option>
    <option value = "a" data-val = "3-chome intersection">a</option>
    <option value = "b" data-val = "3-chome intersection">b</option>
    <option value = "c" data-val = "before Porsche">c</option>
    <option value = "d" data-val = "before Porsche">d</option>
    <option value = "e" data-val = "in front of South Post Office">e</option>
    <option value = "f" data-val = "Before Summit">f</option>
    </select>
    .children {display: none;}
    $('.form-control'). on ('change', function () {
        let $this = $(this),
            child = $this.data ('child'),
            val = $this.val ();
        if (val) {
            let op_cnt = 0;
            $(child) .find ('option') .each (function () {
                let op = $(this);
                if (! op.data ('val') || op.data ('val') == val) {
                    if (op.closest ('span.hide'). length) {
                        op.unwrap ();
                    }
                    if (op.data ('val') == val) {
                        op_cnt ++;
                    }
                } else {
                    if (! op.closest ('span.hide'). length) {
                        op.wrap ('<span>');
                    }
                }
            });
            if (op_cnt) {
                $(child) .show ();
            } else {
                $(child) .val (''). hide (). change ();
            }
        } else {
            $(child) .val (''). hide (). change ();
        }
    });


    Postscript:
    On iOSoptionofdisplay: none;Does not workspanI changed to the method of surrounding with.

  • Answer # 2

    I don't know if the requirements are met, but I think it's easy to control options with show/hide.

    $('.form-control'). change (function () {
        var val1 = $(this) .val ();
        $('.children'). prop ('disabled',! val1);
        var options = $('.children>option');
        options.hide ()
          .filter ('[value = ""], [data-val = "'+ val1 +'"]') .show ()
          .filter (': first'). prop ('selected', true);
      });