Skip to main content

Working with select or drop-down using jQuery

In this article we are going to learn some operation on the select box using jQuery as below.

1. Add new option to a select-element with jQuery

<select id="ddlStatus"></select>

<script type="text/javascript" language="javascript" >
var status = new Array();

status.push("<option value=\"In Process\">In Process</option>");
status.push("<option value=\"On Hold\">On Hold</option>");



2. Retrieve the selected single value from the select box with jQuery


3. Retrieve the multiple selected value from the select box with jQuery

$('#ddlStatus option:selected').each(function(counter, option){

4. Sometime if you don’t want to retrieve selected value and want to get selected text then use the below code

$('#ddlStatus option:selected').text();

5. Retrieve the multiple selected text from the select box with jQuery

If you have a multiple choice element you should go with this code:

$('#ddlStatus option:selected').each(function(counter, option){

6. If you want to remove a specific option from the select box using jQuery

Below code will remove the option which has the value = 2 from the using jQuery

$('#ddlStatus option[value=2]').remove();

7. Clear a selectbox using jQuery


hope this will help someone 🙂

Get outer html of html element using Jquery

<div class='block'>
<p class='paragraph'> 
This is the text inside the second element

for an example if we consider above code block and write a code like below

var htmlString = $("#paragraph").html();

then htmString can have a value “This is the text inside the second element” only

now what if you want a result like “<p class=’paragraph’> This is the text inside the second element </p>”

Sometimes you will need the selected object as well, so below is a small jquery code block which will give you the complete html (outer html) of a Jquery selector.

There are 2 different ways for that, we will see both
There are two major methods used to get an objects outerHTML, we’ll be discussing both.

Getting wrapper html using the outerHTML method

var outer_element_html = $('jQuerySelector')[0].outerHTML ;

Just want to discuss 1 thing it will worked on latest browser only, if you are using 5 year old browser then may be it creates an issue

Get outer html of html element using Jquery clone method
using .clone method it will create an object copy into the memory. It will wrap into p tag around. After that we can use .html() function to get the inner html of the p tag. But if you are working with a big amount of data then cloning every element to the memory is not best way. See the below code for an example

outer_html = $('jQuerySelector').clone().wrap('<p>').parent().html();

in above code “jQuerySelector” is the selector we are using, you need to change it. If there are multiple items for selectors then you can go with .each loop and get the outerHtml of individual items.

Javascript setTimeout() Function with Examples

setTimeout() Function

setTimeout() is a native JavaScript function. Which is allow us to call a specific JavaScript function or piece of code at specified interval or delay (on milliseconds). It might be useful when you want to display a message or a popup after user has browse the webpage for a certain amount of time.

Simple example for setTimeout

$('#btnOk').on('click', function(){
setTimeout(openPopup, 2000);

function openPopup()
alert('You press ok button');

in above example, it will display an alert message after 2 seconds once you press ok button.

Let’s have a look at the syntax for setTimeout function

var timerId = window.setTimeout(FunctionName, [timeInterval, parameter1, parameter2, ...]);
var timerId = window.setTimeout(jscode, [timeInterval]);

timerId is a numerical id return by setTimeout function, so later we can use it to call clearTimeout function to cancel the timer.

FunctionName – is the name of the JavaScript function to be executed after given interval.
jscode – in place of js function you can give direct the JS code to be executed
timeInterval – is the number of milliseconds by which the function should be delayed to call. If you are not passing the time interval then default it will be zero.

Difference between setTimeout vs window.setTimeout

If you see the above code carefully then you will have noticed that I have used window.setTimeout and title of this article is setTimeout, why is that?
let me give you the difference between both of them.

Well above both functions setTimeout and window.setTimeout are essentially same, There is a major difference like in window.setTimeout function we are referencing as a property of global window object. So sometimes if we have defined an another setTimout method in the same scope then it will be a issue. However what ever syntax you choose it’s up to the developer.

You can use setTimeout function in a following manner

using the function name

function LetsCall(){
alert('I am called.');
setTimeout(LetsCall, 2000);

using a variable which refers to the function

var LetsCall = function(){
alert('I am called.');
setTimeout(LetsCall, 2000);

using an anonymous function

alert('I am called.');
}, 2000);

using a direct JScode as a string

setTimeout('alert(\'I am called.\');', 2000);

Now lets move to the cancelling a Timer
The return value of setTimeout is a numerical id which can be used to cancel the timer using clearTimeout() function.

var timerId = setTimeout(jscode, 2000);