问Jquery在下拉列表中跟踪更改

EN

  $('.fieldsWrapper').on('click', '.dlInput', function(e) {
    // e.stopPropagation();
    // load datalist into memory
    var dl = "";
    dl += "<div class='dlOption'>Red</div>";
    dl += "<div class='dlOption'>Yellow</div>";
    dl += "<div class='dlOption'>Green</div>";
    $(".helper").html(dl);
    loadDatalist(dl)
})


function loadDatalist(dl) {
    // $("#helper").width( $("#dlInput").width() );
    $(document).on("click", ".dlInput", function(e) {
        e.stopPropagation();
        // display list if it has value
        var lv = $(".dlInput").val();
        if (lv.length) {
            var os = $(".dlInput").offset();
            $("#orderTypes").attr("id", "orderTypesHide");
            var activeElement = $(document.activeElement)
            var helper = activeElement.next()
            $(helper).show();
            // $('#helper').show()
        }
    });

    $(document).on("click", ".dlOption", function(e) {
        e.stopPropagation();
        $(this).parent().prev('.dlInput').val($(this).html()); //The parent class is the helper and the class before should be the Input box of the class dlInput
        $(".helper").hide();
    });

    $(document).on("change", ".dlInput", function() {
        if ($(this).val() === "") {
            $("#orderTypesHide").attr("id", "orderTypes");
            $(".helper").hide();
        }
    });

}


$('.fireChange').change(function(){
    alert(`Input Event Fired`)
    // addIndividualParts()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class ="fieldsWrapper">
<input list="orderTypes" class="fireChange dlInput" class="form-control fireChange" placeholder="Stage" value="Red">
            <div class="helper"></div>
            <datalist id="orderTypes">
               <option value="Red">
               <option value="Green">
               <option value="Yellow">
            </datalist>
 </div>