jQuery UI - multi-select dropdown - how to obtain the values from the <option tags> for the items in the <ul><li> list items

I'm unfamiliar with jQuery UI.

I have a control that looks like this:

normal
When you click in the "drop down" area it looks like this:

drop down
and if you pick a few items it looks like this:

a few items selected
Here is the problem, as I see it.  The list of items selected, and the list of items to pick from, are generated in different ways, with different information.

The list of items selected uses a unordered list to render the items.

The pop-up list of items available for selection uses a <select><option></option></select> (drop down box)

The items in the unordered list are the picked items, but they do not have the information I need.

The items in the pop-up dropdown box have the ID values I need -- but have no distinguishing information when examined in the client via the F12 Developer tools.

So, I am wondering what is the best way to handle this.

-I've been trying to find a good tutorial on programmatically controlling jQueryUI controls.
-I've considered comparing the "longer information" that is common to both controls, but would prefer something more elegant, which is to obtain the VALUE property from the <option> tags that match the items in the unordered list (why the unordered list does not have this information I do not understand).

Suggestions?

NOTE:  I cannot use some other method of displaying the information.  I tried this and my boss told me, "No, we need to use the UI that we've been given in the spec."  So, I must figure-out how to interact with this control programmatically.


Here is the <select> portion at runtime:

<select name="districtOffice" id="districtOffice" multiple="" class="text ui-widget-content ui-corner-all reqBorder" size="6" tabindex="-1" style="display: none;">

<option value="159">Carpenters Local Union #1109</option>
<option value="140">Carpenters Local Union #1599</option>
<option value="142">Carpenters Local Union #1789</option>
<option value="153">Carpenters Local Union #217</option>
<option value="146">Carpenters Local Union #25</option>
<option value="157">Carpenters Local Union #605</option>
<option value="148">Carpenters Local Union #713</option>
<option value="136">Carpenters Local Union #751</option>
<option value="137">Carpenters Local Union #751</option>
<option value="138">Carpenters Local Union #751</option>
<option value="167">Council</option>
<option value="150">Drywall Lathers Local Union #9068</option>
<option value="162">Drywall Lathers Local Union #9083</option>
<option value="144">Drywall Lathers Local Union #9109</option>
<option value="163">Drywall Lathers Local Union #9144</option>
<option value="161">Hardwood Floorlayers Local Union #1861</option>
<option value="160">Mill Cabinet Local Union #1496</option>
<option value="141">Mill Cabinet Local Union #1618</option>
<option value="149">Mill Cabinet Local Union #2236</option>
<option value="154">Mill Cabinet Local Union #262</option>
<option value="152">Millwrights Local Union #102</option>
<option value="164">Northern District</option>
<option value="151">Pile Drivers Local Union #34</option>
<option value="166">TEST TWO</option>

</select>

Open in new window


Here is the <ul> portion at runtiime:

<ul class="select2-selection__rendered">

<li class="select2-selection__choice" title="Carpenters Local Union #217"><span class="select2-selection__choice__remove" role="presentation">×</span>Carpenters Local Union #217</li>

<li class="select2-selection__choice" title="Carpenters Local Union #751"><span class="select2-selection__choice__remove" role="presentation">×</span>Carpenters Local Union #751</li>

<li class="select2-selection__choice" title="Carpenters Local Union #751"><span class="select2-selection__choice__remove" role="presentation">×</span>Carpenters Local Union #751</li>

<li class="select2-search select2-search--inline"><input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" placeholder="" style="width: 0.75em;"></li>

</ul>

Open in new window



As you can see, the <LI> items do not have the "VALUE"

<li class="select2-selection__choice" title="Carpenters Local Union #217"><span class="select2-selection__choice__remove" role="presentation">×</span>Carpenters Local Union #217</li>

The <option> tags have the values, but no indicator that they are checked:

<option value="153">Carpenters Local Union #217</option>

I was hoping for this:

<option checked value="153">Carpenters Local Union #217</option>

But the options are not managed that way ...  that is what the unordered list is for.


The only information in common between the two controls is:

"Carpenters Local Union #217"

But I don't want to try to match on those values.

What I want is to somehow make the value "153" show-up in the unordered list.  But I don't control the rendering at that level, and I don't want to break the existing UI every where else by trying to unravel the underlying CSS or JavaScript.



Thank you!

Tom
LVL 5
Tom KnowltonWeb developerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rafael LepkoskiSoftware DeveloperCommented:
Can you publish  in jsfiddle an example of what you are doing?
0
Tom KnowltonWeb developerAuthor Commented:
Difficult for me to do.  I have only a passing familiarity with jsfiddle, having used it for much simpler things than this.

Plus I programmatically build the <option></option> tags.

Can we collaborate on jsfiddle?

I am "tomjsfiddle" on there.



In the meantime I will see if I can get something working in jsfiddle for you.
0
Tom KnowltonWeb developerAuthor Commented:
Here is what I have on jsfiddle so far:

https://jsfiddle.net/tomjsfiddle/unsLo4tm/
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Tom KnowltonWeb developerAuthor Commented:
I need a JSON file to represent the data coming in...
0
Rafael LepkoskiSoftware DeveloperCommented:
You can just create de data like this:

var data = {
    "UserLocations": [
        "test1_1",
        "test1_2"
     ]
}

Open in new window

0
Tom KnowltonWeb developerAuthor Commented:
let me update the jsfiddle.
0
Tom KnowltonWeb developerAuthor Commented:
Try it now, with your suggestion:


https://jsfiddle.net/tomjsfiddle/unsLo4tm/
0
Rafael LepkoskiSoftware DeveloperCommented:
You need to get the updated URL
0
Tom KnowltonWeb developerAuthor Commented:
0
Tom KnowltonWeb developerAuthor Commented:
I actually want to setup 2 test records inside of that JSON structure.  Each with 3 values per record:

"159","some text 1","0"
"199","some text 2","1"

Will try to get that setup in a minute here.
0
Rafael LepkoskiSoftware DeveloperCommented:
What is this "0" and "1" for?
0
Tom KnowltonWeb developerAuthor Commented:
What is this "0" and "1" for?

To "check" or "uncheck" the checkbox for the <option> tag.
0
Rafael LepkoskiSoftware DeveloperCommented:
You forgot do add the select2 plugin.

Here's you example working:  https://jsfiddle.net/b46zrs4u/1/
0
Tom KnowltonWeb developerAuthor Commented:
Awesome!

Now ... how do I get the values?  Meaning, the "159" and "199" ?
0
Rafael LepkoskiSoftware DeveloperCommented:
Can you modify the service you are using to retrieve the JSON?

I sugest you to change from

{
      "UserLocations": [
          "159_some text 1_0",
          "199_some text 2_1"
      ]
  }

To:

{
      "UserLocations": {
          "159": {
               "name": "some text 1",
               "checked": false
          },
          "199": {
               "name": "some text 2",
               "checked": true
         }
      }
  }

Can you do it? Then we can get to a better solution for you :)
0
Tom KnowltonWeb developerAuthor Commented:
I don't know what I did, but I broke it:


https://jsfiddle.net/tomjsfiddle/unsLo4tm/4/
0
Rafael LepkoskiSoftware DeveloperCommented:
You really should try to understand what you are doing, otherwise it'll be very difficult to help you...
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Tom KnowltonWeb developerAuthor Commented:
I am trying to debug my JSON data at the moment.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.