how to enter dynamic data to a javascript function after page load

Question

I have a select box which options are coming from database depending on another selected option using ajax

$(document).ready(function(){
    $("select.entity").change(function(){
        var selectedEntity = $(".entity option:selected").val();
        $.ajax({
            type: "POST",
            url: "entityName.php",
            data: { entity : selectedEntity } 
        }).done(function(data){
            $("#entityName").html(data);
        });
    });
});

// This is the select box where options are dynamic.

<label>Select Entity Name:</label>
<select id="entityName" name="entityName" class="select_box" required>
     <option value="" disabled selected>Select Entity Type First</option>
</select>

This works fine but now i want a search box for the options. I am using this function for search.

var select_box_element = document.querySelector('.select_box');
dselect(select_box_element, {
        search: true
       });

As options are dynamic and loaded after the page load that's why this function doesnot work.

I need to push dynamic options into dselect function based on the selection.

JavaScript library that adds advanced features (like live search, dynamic creation, field validation) — Tanvir, Jan 08 '23 at 10:12
Please click [edit] then `[<>]` and create a [mcve] - you can make an example adata object since the ajax works right? — mplungjan, Jan 08 '23 at 10:23
I cannot seem to find a dselect cdn. Is it this one? https://dselect.vercel.app/ — mplungjan, Jan 08 '23 at 10:24
What is the format of `data` you're receiving in your AJAX response? Also, have you tried simply filling the `.select_box` with your response, and then initializing your `dselect` in the AJAX `.done`? — FiddlingAway, Jan 08 '23 at 11:13

mplungjan · Answer 1 · 2023-01-09T05:19:35.653

I use $("#entityName")[0] to get at the DOM element from the jQuery Object

}).done(function(data){
  $("#entityName").html(data);
  dselect($("#entityName")[0], { search: true });
});

Example - you need to add some CSS I think

const $select_box_element = $('#entityName');
const $entity = $('#entityType');
$("select.entity").change(function(){
  if (this.value === "one") {
    $select_box_element.html(`<option value="one">One</option><option value="oneone">OneOne</option>`)
    dselect($select_box_element[0], { search: true });
  }
  else {
    $select_box_element.html(`<option value="two">Two</option><option value="twotwo">TwoTwo</option>`)
    dselect($select_box_element[0], { search: true });
  }
});

dselect($entity[0], { search: true });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@jarstone/dselect/dist/css/dselect.css">
<script src="https://unpkg.com/@jarstone/dselect/dist/js/dselect.js"></script>
<label>Select Entity Type:</label>
<select id="entityType" name="entityType" class="entity" required>
  <option value="" disabled selected>Select Entity Type</option>
  <option value="one">One</option>
  <option value="two">Two</option>
</select>
<label>Select Entity Name:</label>
<select id="entityName" name="entityName" class="select_box" required>
  <option value="" disabled selected>Select Entity Type First</option>
  <option value="one">One</option>
  <option value="one">One</option>
</select>

thanks for the ans. this is what i am looking for but your example is misleading. — Tanvir, Jan 09 '23 at 03:49
It is identical to what you accepted but was posted 45 minutes later! What is misleading? — mplungjan, Jan 09 '23 at 05:15

score 0 · Accepted Answer · answered Jan 08 '23 at 12:01

Something like this might work for you. I've used CSS and JS for the dselect library, as shown in the official GitHub repo. In the example, Bootstrap 5 files are also included, since dSelect seems to be relying on Bootstrap 5 files.

The API used is from the free Pokemon API.

Some notes on the slight rewriting on how the AJAX is handled:

no need to call the AJAX, if there's nothing inside the first select element, and if we revert to the default #entityType value. We just need to clear the previous contents of the #entityName. That is what the if does right inside the change event handler
the AJAX call contains a predefined dataType attribute. This was done because I know in advance that the response in my example (response of Pokemon API) will be in JSON format. You can also do that in your specific case, if you control the back-end / the way entityName.php works and outputs its results. If you don't have that kind of control, you may want to omit this AJAX config parameter, and handle the results differently
instead of using $.ajax({...}).done(...), the example uses separate success and error handlers. This was just a preference choice. For differences between the use of success and done, please refer to this SO answer. In your specific case, .done(...) would have worked as well, with additional testing if the received data matches what you expect it to match, like this:

$.ajax({
// your ajax setup
}).done(function(data){
  if(data) {
      $("#entityName").html(data);
  } else {
      $("#entityName").html('<option value="" disabled selected>Select Entity Type First</option>');
  }

  dselect($("#entityName")[0], { search: true });
});

the example also uses config, as shown in the official GitHub repo. Again, if you're happy with the way you're initializing your dselect, you can skip the configuration

$(document).ready(function(){
    const config = {
        search: false, // Toggle search feature. Default: false
        creatable: false, // Creatable selection. Default: false
        clearable: false, // Clearable selection. Default: false
        maxHeight: '360px', // Max height for showing scrollbar. Default: 360px
        size: '', // Can be "sm" or "lg". Default ''
    }
    dselect($("#entityName")[0], config);

    $("#entityType").change(function(){
        let entityType = $(this).val();
        if(!entityType) {
          $("#entityName").html('<option value="" disabled selected>Select Entity Type First</option>');
          dselect($("#entityName")[0], config);
          return false;
        }
        
        $.ajax({
            type: "GET",
            url: "https://pokeapi.co/api/v2/type/" + entityType,
            dataType: "json",
            success: function(data) {
              let pokemon = data.pokemon;
              let pokeList = '<option value="" selected>Please choose your Pokemon</option>';
              console.log(pokemon[0].pokemon.name);
              for(var i = 0; i < pokemon.length; i++) {
                let pokeName = pokemon[i].pokemon.name;
                let pokeUrl = pokemon[i].pokemon.url;

                pokeList += '<option value="' + pokeUrl + '">' + pokeName + '</option>';
              }
              
              $("#entityName").html(pokeList);
              dselect($("#entityName")[0], config);
            },
            error: function(desc, err) {
                alert("Error: " + JSON.stringify(desc) + ", " + JSON.stringify(err));
            }
        });
    });
});

label {
  margin-left: 15px;
}

#entityType {
  margin: 15px 0 15px 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@jarstone/dselect/dist/css/dselect.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@jarstone/dselect/dist/js/dselect.js"></script>
<label for="entityType">Select Entity Type:</label>
<select id="entityType" name="entityType" class="select_box" required>
     <option value="">Choose</option>
     <option value="water">Water</option>
     <option value="fire">Fire</option>
     <option value="ground">Ground</option>
     <option value="electric">Electric</option>
     <option value="flying">Flying</option>
</select>
<select id="entityName" name="entityName" class="select_box" required>
     <option value="" disabled selected>Select Entity Type First</option>
</select>
<div id="list"></div>

thanks. it worked. could you please explain why you used [0] with deselect() — Tanvir, Jan 09 '23 at 03:51
@Tanvir: I used [0] (and FiddlingAway took it over) to use the DOM element from jQuery object. You (and dselect) uses a DOM element as parameter, I chose to use jQuery to get the element and then pass the DOM version to the function since I did not have time or access to dselect to figure out if dselect could take a jQUery object — mplungjan, Jan 09 '23 at 05:18
thanks for the explanation. your example is a bit complicated and not the way i am looking for. search should be in the option list not separated. — Tanvir, Jan 09 '23 at 06:25
@Tanvir If you use `$()`, you could think of it as getting an array of DOM elements, like you would with `document.querySelectorAll()`. With vanilla (regular) Javascript, when using `document.querySelectorAll(...)`, you extract a specific DOM element of those you collected, by passing an array index - for example, if you have three buttons in your DOM, and you use `document.querySelectorAll("button")`, you would get the first one with `document.querySelectorAll("button")]0]`. The same thing applies to jQuery - since `$("#entityName")` is an array of DOM elements, using -> — FiddlingAway, Jan 09 '23 at 17:13
-> `$("#entityName")[0]` takes the first (and the only) element from that array, which we can then pass to `dselect` as a specific DOM element on which we want to apply it. — FiddlingAway, Jan 09 '23 at 17:14

how to enter dynamic data to a javascript function after page load

2 Answers2