Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

UL to Select

Posted on 2011-10-14
25
Medium Priority
?
1,223 Views
Last Modified: 2012-05-12
Hi guys,

I am trying to convert the following list to a <select>so it can be submitted as part of a form

The structure can not change on the ul list as this is how the css is styled correctly( I didnt do it )

This is the general idea of what I need is

http://v2.easy-designs.net/articles/replaceSelect2/

I just need the js to match the below css structure.


Thanks for all your help

John





<ul>
                    	<li><a href="#" title="1">1</a>
                        	<ul>
                            	<li><a href="#" title="1">1</a></li>
                                <li><a href="#" title="2">2</a></li>
                                <li><a href="#" title="3">3</a></li>
                                <li><a href="#" title="4">4</a></li>
                            </ul>
                        </li>
                    </ul>

Open in new window

0
Comment
Question by:john_yourspace
  • 12
  • 10
  • 2
  • +1
25 Comments
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36967353
Check this
Test Page http://jsfiddle.net/h75Cy/

<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Kiran Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

<script>
$(document).ready(function(){
  var select = $('<select></select>');
  $("ul li ul li").each(function(){
    select.append('<option value="' + $(this).text() + '">' + $(this).text() + '</option>');
  });
  $("p#output").append(select);
});

</script>
</head>

<body>
<form>
  <ul>
    <li><a href="#" title="1">1</a>
        <ul>
            <li><a href="#" title="1">1</a></li>
              <li><a href="#" title="2">2</a></li>
              <li><a href="#" title="3">3</a></li>
              <li><a href="#" title="4">4</a></li>
          </ul>
      </li>
  </ul>
  
  <p id="output"></p>
</form>
</body>

</html>

Open in new window

0
 

Author Comment

by:john_yourspace
ID: 36967378
Hi sonawanekiran,


This displays the select box, but there are new things to note


One: there can be more then one select box on the page,

Two:the select box must be hidden( I can do this with css left - 100000px)

Three: When a user select an option from the UL it needs to update the UL to show the correct selected item / update the drop down so the correct value is submitted


Basically this UL is a complete replacement for the select but I still need the value sent to my form

0
 

Author Comment

by:john_yourspace
ID: 36967396
NOTE: I can create a select box and just use the JS to render the CSS for the drop down this may be the easiest solution
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:john_yourspace
ID: 36967440
This is my attempt at what I am on about

http://jsfiddle.net/h75Cy/3/
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36968120
0
 

Author Comment

by:john_yourspace
ID: 36968302
When I click any of the numbers on the list nothing happens?
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36972188
what exactly do you want to do when you click on those numbers?
0
 

Author Comment

by:john_yourspace
ID: 36973333
Ok,  I ll explain again,


A designer has made me a page with a form in it, he has used the following code

<ul>
                    	<li><a href="#" title="1">1</a>
                        	<ul>
                            	<li><a href="#" title="1">1</a></li>
                                <li><a href="#" title="2">2</a></li>
                                <li><a href="#" title="3">3</a></li>
                                <li><a href="#" title="4">4</a></li>
                            </ul>
                        </li>
                    </ul>

Open in new window


I now need to send this data to my form, so in this ul drop down I need to be able to extract the data on my form side if that makes sense.

Ie convert the above list to a drop down for a my form?


0
 
LVL 4

Expert Comment

by:Lo-Tan
ID: 36973422
Something like this?

http://jsfiddle.net/Ygxt5/5/
0
 
LVL 4

Expert Comment

by:Lo-Tan
ID: 36973512
Here is another fiddle that keeps both lists in synch with each other (code is documented as well)

http://jsfiddle.net/Ygxt5/13/
0
 

Author Comment

by:john_yourspace
ID: 36974151
Ok I have updated that file with exactly what I have

http://jsfiddle.net/Ygxt5/14/

As you can the css makes the ul act like a select, I just need to be able to gather this data on the post

Hope that makes sense sorry for the confusion

J
0
 
LVL 4

Expert Comment

by:Lo-Tan
ID: 36974157
Do you mind if I retrofit that into my second fiddle (http://jsfiddle.net/Ygxt5/13/)?  You have a lot of manual dom manipulation that I would much rather use jQuery as long as it yields the same result and you are OK with using jQuery.
0
 

Author Comment

by:john_yourspace
ID: 36974186
Yea as long as it works and I don't need to alter the CSS too much,  as there is around 10 of these drop downs on a different forms

Thanks for all the help
0
 
LVL 4

Expert Comment

by:Lo-Tan
ID: 36974229
Let me try and understand completely what you are looking for.  You would like the UL selection to result in the selection of the appropriate entry in a REAL select (which may or may not be hidden in the page)?

Also, there may be more than one UL on the page, right (more than one FAKE select type drop down)?
0
 

Author Comment

by:john_yourspace
ID: 36974319
Exactly
0
 
LVL 4

Expert Comment

by:Lo-Tan
ID: 36974523
Ok but are you starting with real selects in the first place and transforming those to UL?  Or are you starting with the UL stuff and wanting to generate a hidden select box dynamically that needs submitted.
0
 
LVL 4

Expert Comment

by:Lo-Tan
ID: 36974529
I came up with something like this

http://jsfiddle.net/Ygxt5/27/

If you are transforming the selects, then I have to tweak the code.
0
 

Author Comment

by:john_yourspace
ID: 36974628
Thank you so much Lo-Tan, I think this is exactly what I am looking for, A++,


Just one or two quick questions,

The page I am using this on is structured as follows

header (with drop down always on everypage) ie pick country or what ever

then I have a search with the same kinda of dropdown, but this will be in separate form

Do I just drop this code in an include with a document.ready around it?

And how does it know which form to drop the select into?


 
0
 
LVL 4

Accepted Solution

by:
Lo-Tan earned 2000 total points
ID: 36974674
Well if you are transforming existing select elements, then my code will not help you.  If you insist that what I have provided will work for you, then here are hopefully some answers to your questions:

new SpecialDropdown(anchorEl, "myInput", "idOfForm");

Open in new window


If you note the constructor of the class I have provided you (above), it takes in three arguments.  The first argument is basically the primary anchor tag that contains the value that is visible to the user, and is also expected to have a set of child UL/LI items for the drop down items in its DOM.  This is considered the root of the drop down, and the hover of this element shows the drop down (ul/li style) list and this element displays the currently selected value.  This element will probably be best found through jQuery style CSS selectors.

The second argument to the constructor is the name of the input field, so that it is submitted properly in the FORM.

The third argument is the id of a form that you need the drop down injected into.

You'll want to take the code that I've attached and create a JS file and include that on pages that need it.  Then on each page , you will have to create an instance of SpecialDropdown, passing it in the proper element (found through CSS selector), a name for the drop down, and id of the form.

Keep in mind that the following code waits until the document is ready (document.ready / onLoad) before running, and is the preferable way to do something like this when using a library like jQuery.  You would include this snippet per page and create the instance of the SpecialDropdown within it, providing it with any page specific values, such as name of the field to be created and the id of the form.

$(function(){
  // Document is ready - create special drop down instance now...
});

Open in new window

// Place this code in an external JS file and include it on pages that needs the functionality.

/**
 * This class manages the drop down belonging to a given set of
 * UL/LI items.  Whenever a new selection is made, the dropdown
 * managed by the instance of this class will be properly updated
 * and the list of items will be hidden from view.
 */
var SpecialDropdown = function(el, inputName, formId){
    this.form = $("#" + formId);
    this.valueItem = $(el);
    this.dropdownList = this.valueItem.siblings("ul");
    this.buildInputElement(inputName);
    this.bindListListeners();
    this.bindHoverFunctionality();
};

/**
 * The id of the form to inject the generated drop down into
 */
SpecialDropdown.prototype.formId = null;

/**
 * The root item that the user sees as being the value for the select
 */
SpecialDropdown.prototype.valueItem = null;

/**
 * The input element that is generated and managed by this component.  This is
 * where the value is stored whenever the user selects a new LI from the UL list.
 */
SpecialDropdown.prototype.inputElement = null;

/**
 * This is just a reference to the list of items for this drop down so that it
 * may be hidden/displayed as needed.
 */
SpecialDropdown.prototype.dropdownList = null;

/**
 * Constructs the input element that will hold the submittable value
 * and backs this UL/LI list in a form.
 */
SpecialDropdown.prototype.buildInputElement = function(inputName){
    this.form.append( $("<span />").text(inputName + ": ") ); // temporary
    this.inputElement = 
        $("<input />").attr("type","text")
        .val(this.valueItem.attr("title"))
        .css({
        color: "blue"
            // Uncomment this to hide the drop downs from the user
            // ,display: "none"
        })
        .attr("name",inputName)
        .appendTo(this.form);
    this.form.append("<br />");
}
 
/**
 * Updates the value item on display, as well as the input element,
 * with the appropriate corresponding value.
 */ 
SpecialDropdown.prototype.setSelectedValue = function(value) {
    this.valueItem.text(value);
    this.inputElement.val(value);
}
    
/**
 * This method is invoked each time an item in the UL/LI list
 * is selected.
 */
SpecialDropdown.prototype.handleLIClick = function(evt) {
    var selectedAhref = $(evt.target);
    
    selectedAhref.parent().addClass("selected");
    //$("li a[title][class~='selected-item']").removeClass(selectedItemClass);
    //$("li a[title]").eq(itemIndex).addClass(selectedItemClass);
    
    this.setSelectedValue($(evt.target).attr("title"));
    this.dropdownList.hide();
    return false;
};

/**
 * Wires all items in the UL/LI list (drop down list) to call the callback
 * so that styles can be applied to the selected item and so that the
 * backing input field can be updated.
 */
SpecialDropdown.prototype.bindListListeners = function() {
    this.dropdownList.find("li a").click($.proxy(this.handleLIClick, this));
};

/**
 * Binds mouse over and mouse exit events to properly hide and show the
 * list of choices that are in the UL
 */
SpecialDropdown.prototype.bindHoverFunctionality = function() {
    var ddList = this.dropdownList;
    var onMouseOver = function(){
        ddList.show(0);
    };
    var onMouseExit = function(){
        ddList.hide(0);
    };
    this.valueItem.parent().mouseenter(onMouseOver).mouseleave(onMouseExit);
    this.valueItem.click(function(){return false;});
};

Open in new window

0
 
LVL 4

Expert Comment

by:Lo-Tan
ID: 36974706
This fiddle actually shows which one is selected in the drop down:

http://jsfiddle.net/Ygxt5/28/
0
 

Author Comment

by:john_yourspace
ID: 36975690
I almost have this thanks again for you patience,

Here is what I have now

This is dropdown.js
/**
 * This class manages the drop down belonging to a given set of
 * UL/LI items.  Whenever a new selection is made, the dropdown
 * managed by the instance of this class will be properly updated
 * and the list of items will be hidden from view.
 */
var SpecialDropdown = function(el, inputName, formId){
    this.form = jQuery("#" + formId);
    this.valueItem = jQuery(el);
    this.dropdownList = this.valueItem.siblings("ul");
    this.buildInputElement(inputName);
    this.bindListListeners();
    this.bindHoverFunctionality();
};

/**
 * The id of the form to inject the generated drop down into
 */
SpecialDropdown.prototype.formId = null;

/**
 * The root item that the user sees as being the value for the select
 */
SpecialDropdown.prototype.valueItem = null;

/**
 * The input element that is generated and managed by this component.  This is
 * where the value is stored whenever the user selects a new LI from the UL list.
 */
SpecialDropdown.prototype.inputElement = null;

/**
 * This is just a reference to the list of items for this drop down so that it
 * may be hidden/displayed as needed.
 */
SpecialDropdown.prototype.dropdownList = null;

/**
 * Constructs the input element that will hold the submittable value
 * and backs this UL/LI list in a form.
 */
SpecialDropdown.prototype.buildInputElement = function(inputName){
    this.form.append( jQuery("<span />").text(inputName + ": ") ); // temporary
    this.inputElement =
        jQuery("<input />").attr("type","text")
        .val(this.valueItem.attr("title"))
        .css({
        color: "blue"
            // Uncomment this to hide the drop downs from the user
            // ,display: "none"
        })
        .attr("name",inputName)
        .appendTo(this.form);
    this.form.append("<br />");
}
 
/**
 * Updates the value item on display, as well as the input element,
 * with the appropriate corresponding value.
 */
SpecialDropdown.prototype.setSelectedValue = function(value) {
    this.valueItem.text(value);
    this.inputElement.val(value);
}
    
/**
 * This method is invoked each time an item in the UL/LI list
 * is selected.
 */
SpecialDropdown.prototype.handleLIClick = function(evt) {
    var selectedAhref = jQuery(evt.target);
    selectedAhref.parent().siblings("li").children("a.selected-style").removeClass("selected-style");
    selectedAhref.addClass("selected-style");
    this.setSelectedValue(jQuery(evt.target).attr("title"));
    this.dropdownList.hide();
    return false;
};

/**
 * Wires all items in the UL/LI list (drop down list) to call the callback
 * so that styles can be applied to the selected item and so that the
 * backing input field can be updated.
 */
SpecialDropdown.prototype.bindListListeners = function() {
    this.dropdownList.find("li a").click(jQuery.proxy(this.handleLIClick, this));
};

/**
 * Binds mouse over and mouse exit events to properly hide and show the
 * list of choices that are in the UL
 */
SpecialDropdown.prototype.bindHoverFunctionality = function() {
    var ddList = this.dropdownList;
    var onMouseOver = function(){
        ddList.show(0);
    };
    var onMouseExit = function(){
        ddList.hide(0);
    };
    this.valueItem.parent().mouseenter(onMouseOver).mouseleave(onMouseExit);
    this.valueItem.click(function(){return false;});
};

Open in new window



My UL looks like this

<ul>
                    	<li><a href="#" id="locationParentUL" title="Galway">Galway</a>
                        	<ul>
                            	<li><a href="#" title="Galway">Galway</a></li>
                                <li><a href="#" title="Dublin">Dublin</a></li>
                                <li><a href="#" title="Cork">Cork</a></li>
                                <li><a href="#" title="Belfast">Belfast</a></li>
                            </ul>
                        </li>
                    </ul>
					<form id="frmLocation" name="frmLocation"/>

Open in new window



And in my footer I have

jQuery(document).ready(function(){
		new SpecialDropdown(jQuery("#locationParentUL"), "myInput", "frmLocation");
})

Open in new window



What am I doing wrong :(


0
 

Author Comment

by:john_yourspace
ID: 36975703
I sorted it i had a form in a form duh :(
0
 

Author Closing Comment

by:john_yourspace
ID: 36975706
Excellent cannot thank you enough
0
 
LVL 4

Expert Comment

by:Lo-Tan
ID: 36976109
You're welcome
0
 
LVL 4

Expert Comment

by:Lo-Tan
ID: 36976168
Ok, I couldn't resist.  I cleaned up some of the code and also put in code that applies the selected-item class to the appropriate UL/LI as soon as you create the SpecialDropdown.  So even on the first expansion of the drop down, the right LI has the class applied.

Fiddle here >  http://jsfiddle.net/Ygxt5/30/

Code attached.

Cheers,
Lo-Tan
/**
 * This class manages the drop down belonging to a given set of
 * UL/LI items.  Whenever a new selection is made, the dropdown
 * managed by the instance of this class will be properly updated
 * and the list of items will be hidden from view.
 */
var SpecialDropdown = function(el, inputName, formElementId){
    this.formElement = jQuery("#" + formElementId);
    this.valueElement = jQuery(el);
    this.dropdownList = this.valueElement.siblings("ul");
    this.buildInputElement(inputName);
    this.bindListListeners();
    this.bindHoverFunctionality();
    this.setSelectedValue(this.valueElement.attr("title"));
};

/**
 * The form to inject the generated drop down into
 */
SpecialDropdown.prototype.formElement = null;

/**
 * The root item that the user sees as being the value for the select
 */
SpecialDropdown.prototype.valueElement = null;

/**
 * The input element that is generated and managed by this component.  This is
 * where the value is stored whenever the user selects a new LI from the UL list.
 */
SpecialDropdown.prototype.inputElement = null;

/**
 * This is just a reference to the list of items for this drop down so that it
 * may be hidden/displayed as needed.
 */
SpecialDropdown.prototype.dropdownList = null;

/**
 * Constructs the input element that will hold the submittable value
 * and backs this UL/LI list in a form.
 */
SpecialDropdown.prototype.buildInputElement = function(inputName){
    this.formElement.append( jQuery("<span />").text(inputName + ": ") ); // temporary
    this.inputElement = 
        jQuery("<input />").attr("type","text")
        //.val(this.valueElement.attr("title"))
        .css({
            color: "blue"
            // Uncomment this to hide the drop downs from the user
            // ,display: "none"
        })
        .attr("name",inputName)
        .appendTo(this.formElement);
    this.formElement.append("<br />");
}
 
/**
 * Updates the value item on display, as well as the input element,
 * with the appropriate corresponding value.
 */ 
SpecialDropdown.prototype.setSelectedValue = function(value) {
    this.valueElement.text(value);
    this.inputElement.val(value);
    // Highlight the appropriate element in the drop down list
    this.dropdownList.find("li > a.selected-style").removeClass("selected-style");
    this.dropdownList.find("li > a[title='" + value + "']").addClass("selected-style");
}
    
/**
 * This method is invoked each time an item in the UL/LI list
 * is selected.
 */
SpecialDropdown.prototype.handleLIClick = function(evt) {
    var selectedAhref = jQuery(evt.target);
    this.setSelectedValue(jQuery(evt.target).attr("title"));
    this.dropdownList.hide();
    return false;
};

/**
 * Wires all items in the UL/LI list (drop down list) to call the callback
 * so that styles can be applied to the selected item and so that the
 * backing input field can be updated.
 */
SpecialDropdown.prototype.bindListListeners = function() {
    this.dropdownList.find("li a").click(jQuery.proxy(this.handleLIClick, this));
};

/**
 * Binds mouse over and mouse exit events to properly hide and show the
 * list of choices that are in the UL
 */
SpecialDropdown.prototype.bindHoverFunctionality = function() {
    var ddList = this.dropdownList;
    var onMouseOver = function(){
        ddList.show(0);
    };
    var onMouseExit = function(){
        ddList.hide(0);
    };
    this.valueElement.parent().mouseenter(onMouseOver).mouseleave(onMouseExit);
    this.valueElement.click(function(){return false;});
};

Open in new window

0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

581 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question