• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 458
  • Last Modified:

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
0
Tom Knowlton
Asked:
Tom Knowlton
  • 11
  • 7
1 Solution
 
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy 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
 
Tom KnowltonWeb developerAuthor Commented:
I am trying to debug my JSON data at the moment.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

  • 11
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now