Develop Reference

Define function and use as onchange in the select statement instead of directly using .change(function)

What is wrong with defining a function and using it as onchange in the select statement instead of directly using .change(function).
I want to use this to display a different combo box :
function MetricLayerShowHide (){
var type = $(this).val();
if( type !==''){
$('.content').hide();
$('#'+type).show();
}
}
<select name="MetricType" id="MetricType" onchange="MetricLayerShowHide();" >
<option value=CD>CD</option>
<option value=HT>HT</option>
<option value=Profile>Profile</option>
</select>
<div id="CD" style ="display: none" class ="content">
<SELECT NAME="LayerList" id="layer1">
</SELECT>
</div>
instead of
$(function(){
$('#MetricType').change(function(){
var type = $(this).val();
if( type !==''){
$('.content').hide();
$('#'+type).show();
}
});
});
this is working though.
Where am I going wrong ?

The problem is that this no longer is the element when you call the function. You are calling the function in the global context, so this will be the window object inside the function.
You can use the call method to call the function with the element as context:
onchange="MetricLayerShowHide.call(this);"
Demo: http://jsfiddle.net/Guffa/co5ymkyk/

The problem is simple: this is no longer referring to the element you are expecting when you call the function.
HTML:
<form>
<select name="MetricType" id="MetricType" >
<option value=CD>CD</option>
<option value=HT>HT</option>
<option value=Profile>Profile</option>
</select>
</form>
<div class="content" id="CD">CD</div>
<div class="content" id="HT">HT</div>
<div class="content" id="Profile">Profile</div>
Script:
$(function(){
$('#MetricType').change(function(){
var type = $(this).val();
if( type !==''){
$('.content').hide();
$('#'+type).show();
}});
});
CSS:
.content { display: none; }
JSFiddle demo here.
On a side note, this is based on the JSFiddle you posted as a comment. You created a new issue by missing a bracket.
Please update your question, as this answer doesn't make sense out of context. #Guffa actually answered your question correctly.

Append div or span to a dropdown list

I would like to "attach" a div to a dropdown list. Is that possible?
I require something like this:
To be clear, I don't need to add div into the proper dropdownlist controller. I just need to attach.
What I've tried so far and not working:
HTML:
<select id="platypusDropDown">
<option value="duckbill">duckbill</option>
<option value="duckbillPlatypus">duckbillPlatypus</option>
<option value="Platypus">Platypus</option>
<option value="Platypi">Platypi</option>
</select>
<div id="addCategory">
<input id="categoryInput" type="text" /> <br/>
<input id="categoryInputAddBtn" type="button" value="Add new" />
</div>
JS:
$('#platypusDropDown').click(function () {
var myDiv = document.getElementById('addCategory');
this.append(myDiv);
});
Any solution? Thanks in advance.

I don't think so, what you are trying to achieve is possible using select dropdown.What here, i will do is modify my HTML Code and use css style.
<style type="text/css">
ul{ list-style: none;
margin: 0;
padding: 0; }
</style>
Here is my HTML Code: Instead of dropdown, i am using here ul li listing element.
<div class="select-wrapper">
Select Dropdown
<ul id="platypusDropDown" style="display:none;">
<li rel="duckbill">duckbill</li>
<li rel="duckbillPlatypus">duckbillPlatypus</li>
<li rel="Platypus">Platypus</li>
<li rel="Platypi">Platypi</li>
</ul>
</div>
<div class="wrapper" style="display:none;">
<div id="addCategory">
<input id="categoryInput" type="text" /> <br/>
<input id="categoryInputAddBtn" type="button" value="Add new" />
</div>
</div>
Here is my JS code:
<script type="text/javascript">
$(document).ready(function(){
var flg = 0;
$('.select-wrapper').click(function(){
flg++;
if(flg == 1){
$this_html = jQuery('.wrapper').html();
$("#platypusDropDown").append("<li>"+$this_html+"</li>");
}
$("#platypusDropDown").slideToggle();
});
});
</script>

You can't add DIV to selectBlock. But you can add option into select:
$('#platypusDropDown').click(function () {
var myDiv = document.getElementById('addCategory');
$(this).after(myDiv);
});

LEAVE jQuery Part . This is not possible by setting HTML static markup WITH select Containing DIV . SO IT IS NOT POSSIBLE . u may use markup but , still It wil hide in browser even though u can see in Firebug , div is attached to dropdown.
But if u r asking for : add Text as option in dropdown , then ,
Working FIDDLE
$('#categoryInputAddBtn').click(function () {
var myDiv = $('#categoryInput').val();
//this.append(myDiv);
var option = $('<option/>');
option.attr({ 'value': 'myValue' }).text(myDiv);
$('#platypusDropDown').append(option);
});

As far as I know this is not possible with standard HTML select/option tags. But there are several different libraries emulating dropdown functionality and giving additional functionalities. One of those is UI Kit which provides this among a lot of other features. You can add so called 'Grid' components to the dropdown which can in fact contain anything you want. See detail over here under the headline 'Grid'.

You can add input value to dropdown list.
var $platypusDropDown = $('#platypusDropDown');
$('#categoryInputAddBtn').on('click', function() {
// Value of div input
var $category = $('#categoryInput').val();
// Add to dropdown list
$platypusDropDown.append('<option value="' + $category + '">' + $category + '</option>');
});

Why you whant add div to Options? You could try like this:
$('#platypusDropDown').click(function () {
var dropHeight = $(this.options[0]).height() * this.options.length;
if($(this).data('open')) {
$(this).data('open', false);
$('#addCategory').css('padding-top', '0px')
return;
}
$('#addCategory').css('padding-top', dropHeight + 'px')
$(this).data('open', true);
});
JSFIDDLE DEMO

How to pass selected value in dropdown and append in site_url?

How do you get the selected value in dropdown and append it into the site_url? I cant figure out how to do this. Please point me in the right diretion. Thank you.
<form name="filterByDate" method="post">
<h3>Filter Suggestion</h3>
<select name="year">
<option value="2013">2013</option>
<option value="2014">2014</option></select>
<ul>
<li>Jan</li>
<li>Feb</li>
</ul>
</form>
I edited the accepted answer below: here is the edited portion:
var linksContainer=document.getElementById("linksContainer");
linksContainer.innerHTML="<li>January

Try to use the code below: (have slightly changed it)
<html>
<body>
<form name="filterByDate" method="post">
<h3>Filter Suggestion</h3>
<select name="year" onchange="generateLinks(this);">
<option value="2013">2013</option>
<option value="2014">2014</option></select>
<!-- <ul>
<li>Jan</li>
<li>Feb</li>
</ul> -->
<ul id="linksContainer">
</ul>
</form>
<script type="text/javascript">
function generateLinks(obj){
var selval=obj[obj.selectedIndex].value;
var linksContainer=document.getElementById("linksContainer");
linksContainer.innerHTML="<li>Jan</li>";
}
</script>
</body>
</html>

Ill use jQuery then, however id improve on the markup to have classes/IDs for the tags i wanted to target.
Give the select a class/id and use it in the script and the UL and or the link that is to be targeted.
function saveUrl($item, url ) {
$item.attr('data-url', url);
}
// save all the links original href
$('ul a').each(function() {
saveUrl( $(this), $(this).attr('href') );
});
// on change make the links go to the actual year
$('.select-year').on('change', function() {
var $link = $('ul a'),
linkDataUrl = $link.attr('data-url'),
selectedOption = $(this).val(),
newUrl = linkDataUrl + selectedOption;
$link.attr('href', newUrl);
});

The below will give you the selected text value in dropdown
$("#yourdropdownid option:selected").text();
and below will give the selected index
$("#yourdropdownid ").val()
you can pass the index or text to the anchor to pass url and call a onclick event method
please refer below sample code
Jan
js
document.getElementById('myAnchor').onclick = function() {
// this is the <a> in here
window.location.replace("Pass the value from Dropdown from above methods");
return false; // optional, prevents href from executing at all
};

Using custom attribute jQuery selectors with dropdown select

I have a series of cascading drop downs that are populated with a database. I'm trying to pull the data from a row in my database once the final item in the series is selected. I gave the row a custom attribute, but can't seem to get the data from it. Here is a simple example of what I want to accomplish.
http://jsfiddle.net/WsrBX/
HTML
<body>
<div id="wrapper">
<form>
<div>no id</div>
<select>
<option>pick</option>
<option data-pick="33">with id</option>
</select>
<div id="there">has an id</div>
<div>nope</div>
</form>
</div>
<div id="yup"></div><!--value should appear here upon selection-->
</body>
JS
$('option[data-pick]').on('keyup change', function(){
var idString = $(this).attr('option[data-pick]');
$('#yup').text(idString);
});

HTML:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<body>
<div id="wrapper">
<form>
<div>no id</div>
<select id="sel">
<option>pick</option>
<option data-pick="33">with id</option>
</select>
<div id="there">has an id</div>
<div>nope</div>
</form>
</div>
<div id="yup"></div>
<!--value should appear here upon selection-->
</body>
JS:
$('#sel').on('keyup change', function () {
var idString = $('option:selected', this).attr('data-pick');
$('#yup').text(idString);
});
Working Demo

http://jsfiddle.net/WsrBX/1/
$('select').on('change', function(){
var idString = $(this).find("option:selected").attr('data-pick');
$('#yup').text(idString);
});

Several tips:
The change event only happens on <select>, and you cannot capture it on <option>.
The keyup event literally means keys of the keyboard, which may not be what you want.
Proper solution should be listening for change on <select>, and find the corresponding <option> using selectedIndex of <select> DOM element. Example below:
$('select').on('change', function(){
var idString = this.options[this.selectedIndex].getAttribute('data-pick');
$('#yup').text(idString);
});

moving select options up and down via jquery

so I got this code working for Firefox and Chrome...what it does is it allows you to reorder the options within an HTML select form...but then when I tested the code via IE8, it's kind of patchy...it only works for the first few clicks and after that you have to click many times on the button for it to work..
Does anybody know any other code that allows you to reorder select field items that works perfectly in IE8?
<select id="list" multiple="multiple">
<option value="wtf">bahaha</option>
<option value="meh">mwaahaha</option>
</select>
<button id="mup">Move Up</button>
<button id="mdown">Move Down</button>
Add Item
Remove item
<script>
$(document).ready(function(){
$('#mup').click(function(){
moveUpItem();
});
$('#mdown').click(function(){
moveDownItem();
});
});
function moveUpItem(){
$('#list option:selected').each(function(){
$(this).insertBefore($(this).prev());
});
}
function moveDownItem(){
$('#list option:selected').each(function(){
$(this).insertAfter($(this).next());
});
}

Your code for changing the options works fine. It seems IE8 isn't handling a "fast" second-click with the click event but rather expects a double click to be handled.
Using my test code below, you'll notice that in IE8 writes out the following when Move Down/Up is pressed "fast":
Move Down Click
Move Down Double-Click
Move Down Click
Move Down Double-Click
But with FF/Chrome the following is printed:
Move Down Click
Move Down Click
Move Down Double-Click
Move Down Click
Move Down Click
Move Down Double-Click
Here's the code I'm using to test. I haven't done any tests to see if it's jQuery's event binders that are causing the issues.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
</head>
<body>
<select id="list" multiple="multiple">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<button id="mup">Move Up</button>
<button id="mdown">Move Down</button>
<script type="text/javascript">
var $DEBUG = null;
$(document).ready(function ()
{
$DEBUG = $("#debug");
$DEBUG.append("Registering Events<br />");
$("#mup").click(moveUpItem);
$("#mdown").click(moveDownItem);
$("#mup").bind("dblclick", function ()
{
$DEBUG.append("Move Up Double-Click<br />");
});
$("#mdown").bind("dblclick", function ()
{
$DEBUG.append("Move Down Double-Click<br />");
});
});
function moveUpItem()
{
$DEBUG.append("Move Up Click<br />");
}
function moveDownItem()
{
$DEBUG.append("Move Down Click<br />");
}
</script>
<div id="debug" style="border: 1px solid red">
</div>
</body>
</html>
EDIT: I can confirm it is IE8 that is the problem. Swap this IE8-specific code in the $(document).ready() handler:
// $("#mup").click(moveUpItem);
$("#mup")[0].attachEvent("onclick", moveUpItem);
// $("#mdown").click(moveDownItem);
$("#mdown")[0].attachEvent("onclick", moveUpItem);
// $("#mup").bind("dblclick", function ()
$("#mup")[0].attachEvent("ondblclick", function ()
{
$DEBUG.append("Move Up Double-Click<br />");
});
// $("#mdown").bind("dblclick", function ()
$("#mdown")[0].attachEvent("ondblclick", function ()
{
$DEBUG.append("Move Down Double-Click<br />");
});

Example:
to move 3rd option before 1st option, we can use below jquery:
$('select[name="NameOfDropDown"] option:eq(2)').insertBefore($('select[name="NameOfDropDown"] option:eq(0)'));

I think this will give some ideas of how to do it, you can dynamically place any option before one known position just by knowing the values of both, the one to move and the one of the position:
How would you dynamically order an <option select> list using JQuery?

I know this one is a bit old, but I recently made this simple jQuery plugin to be able to reorder elements in a multiple select element.
Have a look and see if it helps for you, I tested in IE8,IE9,Chrome,FireFox,Opera.
http://fedegiust.github.io/selectReorder/