How to trigger change in jqueryui combobox after underlying select is manually changed?

14,877

Solution 1

Listen for the change event on the select and update the field accordingly:

$("#savedSearchSelect").change(function() {
    $(this).next().val($(this).children(':selected').text());     
});

http://jsfiddle.net/Wg6sR/8/

Solution 2

Fire the change event on the select like this:

    $("#savedSearchSelect").change()

This needs to happen after the binding provided by Mathletics.

http://jsfiddle.net/PzsJg/1/

This is a bit more elegant, IMO: http://jsfiddle.net/PzsJg/3/

Share:
14,877
Warren J Thompson
Author by

Warren J Thompson

An artistic writer, social media marketing specialist, entepeneur, and computer scientist. Yes, I am lawfully allowed to be all those things http://www.thompsonwebinc.com

Updated on November 21, 2022

Comments

  • Warren J Thompson
    Warren J Thompson 12 months

    With the following HTML:

    <select id="savedSearchSelect">
        <option value="10024">All docs.true</option>
        <option value="10028">fgfd.false</option>
        <option value="10029">htyu.false</option>
        <option value="10030">dffdgb.false</option>
        <option value="10031">Puppy.false</option>
        <option value="10056">Puppy 2.false</option>
        <option value="10057">Puppy 3.false</option>
        <option value="10058">Puppy 4.false</option>
        <option value="10059">Puppy 5.false</option>
        <option value="10060">Puppy 6.false</option>
    </select>​
    

    I initialize a combobox:

    $("#savedSearchSelect").combobox();
    

    Later in the code - I manually trigger an option selected in the underlying select:

     $("#savedSearchSelect option:eq(2)").attr("selected", "selected");
    

    What is the next step to trigger in the jquery ui combobox that the item has been chosen?

    Demo of my problem in jsFiddle is already set up here: http://jsfiddle.net/Wg6sR/7/

    • Mani Deep
      Mani Deep over 8 years
      all jsFiddles in the questions, answers are expired/resources not found can someone please update them?
  • Warren J Thompson
    Warren J Thompson over 11 years
    Thanks for the idea - that solves half the problem - but it still doesn't trigger the selected or changed event: jsfiddle.net/wtvamp/Wg6sR/11
  • Mathletics
    Mathletics over 11 years
    jsfiddle.net/Wg6sR/12 here you go; trigger the 'autocomplete' selected event, and add a listener for that event to the input created by the combobox call.
  • Warren J Thompson
    Warren J Thompson over 11 years
    Ok - so I've been playing with this a little more - and when I trigger autocomplete, ui seems to be empty - any way to fix this? jsfiddle.net/wtvamp/Wg6sR/13
  • Mathletics
    Mathletics over 11 years
    the event object is automatically passed, but you can build and pass the ui object yourself: jsfiddle.net/Wg6sR/14 Look at my example and try selecting an option with the dropdown, then with the input field. You should see similar objects in the console (the label is showing up very weird in the "real" ui object, but I think that's something to do with jsfiddle.)
  • Warren J Thompson
    Warren J Thompson over 11 years
    Beautiful - I cheated and did some funky string manip with the event - but I think I'll go back and do this instead. All the internets for you!
  • Tieson T.
    Tieson T. over 11 years
    Thanks. This got me past a problem I was having (syncing two comboboxes). Seems so simple in retrospect... :p