0

I have some jQuery UI dropdown lists like this one:

<div id="__E286-field" class="jtx-field " style="width:90px;">
    <label for=""></label>
    <select id="__E286" name="ToStartHour" class="ddl" style="width: 90px; display: none;" data-scopename="">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>
    <span class="ui-selectmenu-button ui-widget ui-state-default ui-corner-all" tabindex="0" id="__E286-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="__E286-menu" aria-haspopup="true" style="width: 88px;">
        <span class="ui-icon ui-icon-triangle-1-s"></span><span class="ui-selectmenu-text">1</span>
    </span>
</div>

Now I want to do some validation on the dropdowns so I added this JavaScript:

$("select").on("change", function () {
    checkTimes(
        $("select[name='FromStartDate']").val(),
        $("select[name='FromStartHour']").val() + ":" + $("select[name='FromStartMinute']").val() + " " + $("#select[name='FromStartMeridiem']").val(),
        $("select[name='FromEndDate']").val(),
        $("select[name='FromEndHour']").val() + ":" + $("select[name='FromEndMinute']").val() + " " + $("#select[name='FromEndMeridiem']").val(),
    );
    
  checkTimes(
        $("select[name='ToStartDate']").val(),
        $("select[name='ToStartHour']").val() + ":" + $("select[name='ToStartMinute']").val() + " " + $("#select[name='ToStartMeridiem']").val(),
        $("select[name='ToEndDate']").val(),
        $("select[name='ToEndHour']").val() + ":" + $("select[name='ToEndMinute']").val() + " " + $("#select[name='ToEndMeridiem']").val(),
    );
  
  alert('fred'); // testing to see if the event fires
});

The checkTimes is a validation function whose content is probably irrelevant here; however even if I put an alert statement inside the event handler as I did above, it does not get called. How can I get the change event to fire for the jQuery UI dropdown lists?

ekolis
  • 6,270
  • 12
  • 50
  • 101
  • Works for me: https://jsfiddle.net/w7fvy9t6/ Are there any errors at all in your browser's development console? The ` – David Jul 02 '20 at 18:50
  • Yeah, I'm not sure how exactly jQuery UI works, but it seems to replace the `select` tags with `span`s and such, which is really confusing. The `select`s are hidden, and I guess when you click one of the `span`s, the `select` is automatically updated, or something? But this is not triggering the `change` event... – ekolis Jul 02 '20 at 19:08
  • Interesting, it's been a while since I've used jQuery UI specifically, but it could be one of those old plugins that doesn't natively handle `change` and has its own event. The linked duplicate appears to confirm this. – David Jul 02 '20 at 19:10

0 Answers0