Add Config - part 1

Let's contiue by allowing the user to select options. Since we already use jQuery, we're going to use Select2 as well. Feel free to use any other alternative. We are going to use select2@4.0.13 for this example.

<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

Let's add a select box above the file input. We will name this selectedEntitesInput.

<!-- Input -->
<select
    id="selectedEntitesInput"
    name="selectedEntites[]"
    multiple="multiple"
    style="width: 100%"
    required
></select>
<input type="file" id="myIfcFile" onchange="myFunction()" />

Let's configure select2. We're going to load our data from an array.

$(document).ready(function () {
    // select2
    $("#selectedEntitesInput").select2({
        data: data,
        placeholder: "Select which entities to include",
    });
});

Here's a staring template. Again, a list of IFC building elements can be found here.

Our HTML should look something like this:

PreviousAdd Basic HTML PageNextAdd Config - part 2

Last updated