JSFiddle - React, Tailwind, and code Playground

by orchid1

HTML

<div data-custom-select class="select-price ">
    <label for="price" data-label-hide class="has-hidden-label">Selecteer prijs</label>
    <select name="adv.bedragplaats" id="price" class="price-field" data-price data-set-as-required>
        <option value="">Kies...</option>
        <option value="&lt;amount&gt;">Bedrag</option>
        <option value="gratis">Gratis</option>
        <option value="ruilen">Ruilen</option>
        <option value="teab">Prijs overeen te komen</option>
        <option value="nvt">Niet van toepassing</option>
    </select>
</div>

JavaScript

(function ($) {

        $(function () {

            //first assign the change event which opens the box on the side
            $('.price-field').on("change", function () {

                if ($(this).val() === "<amount>") {
                    console.log("the amount option has been selected now open THE BOX");
                }

            })

                //then select the bedrang
                    .find('option[value="<amount>"]')

                //then trigger the click to open the box
                    .attr("selected", true).trigger("change");
        });

    }(jQuery))