Linking combo box (JQuery preferrably)

Question!

I am wondering if anyone has any experience using a JQuery plugin that converts a html

<select> <option> Blah </option> </select>

combo box into something (probably a div) where selecting an item acts the same as clicking a link.

I guess you could probably use javascript to handle a selection event (my javascript knowledge is a little in disrepair at the moment) and 'switch' on the value of the combo box but this seems like more of a hack.

Your advice, experience and recommendations are appreciated.



Answers

The simple solution is to use

$("#mySelect").change(function() {
  document.location = this.value;
});

This creates an onchange event on the select box that redirects you to the url stored in the value field of the selected option.



I'm not sure where you want to link to when you click the Div, but given something like this perhaps would work:

<select id="mySelect">
  <option value="1">Option 1</option>
  <option value="2">Option 2</options>
</select>
<div id="myDiv"/>

and the following JQuery creates a list of <div> elements, a goes to a URL based on the value of the option:

$("#mySelect option").each(function() {
    $("<div>" + $(this).text() + "</div>").appendTo($("#myDiv")).bind("click", $(this).val(), function(event) {
        location.href = "goto.php?id=" + event.data;
    });
});
$("#mySelect").remove();

Does this do what you want?

By : samjudson


This video can help you solving your question :)
By: admin