You've probably seen this interview with Ira Glass (This American Life) before in different formats, but if you haven't, it's worth your two valuable minutes. If you have, it's still worth two more of your minutes today, right? Enjoy.
Mahabaleshwer, a set on Flickr.
A trip to Mahabaleshwar-Panchgani
If you want to read latest news(technology,fun,entertainment,sports,music,food,travel etc.) or if you want to know about latest products,startups etc. Then their is a website for you visit The Last Week
Sometimes when you embed you tube player in your website or web application then you might face a css z-index issue with this player.It means that the you tube player may come over your other html elements.
So i found a good solution here(http://goo.gl/vWFz4) .It works fine for me,
If you just want to dynamically change the option/data of a drop Down list based on the selection made by user on the previous drop down list.So this thing can be easily done by using jQuery.
So here i am writing the code in which a user first select the country from a country drop down list and then based on that country selection second drop down of states list is populated dynamically.
You can just copy paste this code into a file and open it in browser.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".countryDropDown").change(function()
{
var country=$(this).val();
function fillStateDropDown(countryStateOption)
{
$.each(countryStateOption, function(val, text) {
$('.stateDropDown').append(
$('<option></option>').val(val).html(text));
});
}
function clearStateDropDown()
{
$('.stateDropDown option:gt(0)').remove();
}
if(country=='INDIA')
{
clearStateDropDown();
var indiaStateOption={
RAJASTHAN:'Rajasthan',
GUJRAT:'Gujrat',
MAHARASTRA:'Maharastra'
};
fillStateDropDown(indiaStateOption);
}
else if(country=='UK')
{
clearStateDropDown();
var ukStateOption={
LONDON:'London',
LIVERPOOL:'Liverpool',
DERBY:'Derby'
};
fillStateDropDown(ukStateOption);
}
else if(country=='USA')
{
clearStateDropDown();
var usaStateOption={
CALIFORNIA:'California',
TEXAS:'Texas',
NEWYORK:'New York'
};
fillStateDropDown(usaStateOption);
}
var stateOptions = {
val1 : 'text1',
val2 : 'text2'
};
});
});
</script>
<style type="text/css">
div
{
padding:35px;
float:left;
}
}
</style>
<title>New Web Project</title>
</head>
<body>
<h1>Dynamic Drop Down using jQuery</h1>
<div>Country:
<select class="countryDropDown">
<option value="">--Select Country--</option>
<option value="INDIA">India</option>
<option value="UK">UK</option>
<option value="USA">USA</option>
</select>
</div>
<div>State:
<select class="stateDropDown">
<option value="">--Select State--</option>
</select>
</div>
</body>
</html>
if you want to add option to other dropDown list based on the selection of the previous one ,then this is not the right post for you.You need to go here(how to make a drop down list based on another drop down using jQuery).
So now if you just want to add option to a drop down List using jQuery based on some event then you can simply do this.Here i am adding option to a drop down list on click of a button.By using the same code you can do this as per your requirements.
just copy paste the code given below in a file and run it in browser and just click on the button(Click to add option) then it will automatically add option to the drop down given on the page.
I hope the code written below is self explanatory so you can understand it,in case of any issue please post comments.
<html>
<head>
<title>How to add option to drop down list</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
div.demo
{
float:left;
padding:25px;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.demoButton').click(function(){
var optionList={
firefox:'Mozilla firefox',
chrome:'Google chrome'
};
$.each(optionList,function(val,text){
$('.demoDropDown').append($('<option></option>').val(val).html(text));
});
});
});
</script>
</head>
<body>
<div class="demo">
<button class="demoButton">Click to add option</button>
</div>
<div class="demo">
<select class="demoDropDown">
<option>--Select--</option>
</select>
</div>
</body>
</html>
