How to set a Specific option as selected

<html>
<head>
	<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
	<script>
	 $('document').ready(function(){
	   $('#btnSubmit').click(function(){
            alert($('#cboLocation').val());
            alert($('#cboLocation').find(":selected").text());
			});
		});
	</script>
</head>
<body>
<select name="cboLocation"  id="cboLocation">
  <option value="">Select Zone</option>
  <option value="South">South Chennai</option>
  <option value="North">North Chennai</option>
  <option value="East">East Chennai</option>
  <option value="West">West Chennai</option>
</select>
<input type="button" name="btnSubmit" id="btnSubmit" value="Click Me"/>
</body>
</html>

How to get Selected Item Value

 alert($('#cboLocation').val());

How to get Selected Item Text

 alert($('#cboLocation').find(":selected").text());
        url = "/property/realestate_statistics/";	
	
	lngCityId = $('#cboCityName').val();
	
        $.post(
	  url,
	  {
	   "act" 		: "GetCommonLocation",
	   "CityId" 		: lngCityId
	  },
	  function(responseText){		
	   $('#cboLocation').html(responseText);		
	   $('#cboPropertyType').html('');
  	   $('#cboPropertyType').append( new Option('Property Type',''));      			
	   $('#cboPropertyType').val('Property Type');
	  }, 
	  "html"
	);

I have a response text coming after changing city and this will be populated in second drop down
cboLocation. Now the third drop down should be repopulated based on property type at city by taking common location selected in to consideration. for that you should reset property type apart from resetting cboLocation.

To do so

        $('#cboPropertyType').html('');
  	$('#cboPropertyType').append( new Option('Property Type',''));      			
	$('#cboPropertyType').val('Property Type');
  1. $(‘#cboPropertyType’).html(”) – To empty the Content of Drop down
  2. $(‘#cboPropertyType’).append( new Option(‘Property Type’,”)) – It should Contain only Property Type in Option so i am Appending that
  3. $(‘#cboPropertyType’).val(‘Property Type’) – It should point to only one option that exixts

Create session cookie

  $.cookie('CookieName', 'Value');

Cookie that Expires in 7 days

 $.cookie('CookieName', 'Value', { expires: 7 });

Create cookie valid across entire site:

  $.cookie('CookieName', 'Value', { expires: 7, path: '/' });

Read value cookie:

 $.cookie('the_cookie'); // => "the_value"
 $.cookie('not_existing'); // => null

Delete cookie:

 // Returns true when cookie was found, false when no cookie was found...
 $.removeCookie('the_cookie');

 // Same path as when the cookie was written...
 $.removeCookie('the_cookie', { path: '/' });

In jQuery, suppose you have an element of some kind that you’re hiding and showing, using .hide(), .show() or .toggle(). How do you test to see if that element is currently hidden or visible on the screen?

 // Checks for display:[none|block], ignores visible:[true|false]
 $(element).is(":visible") 

You can use the “hidden” and “visible” selectors.

 $('element:hidden')
 $('element:visible')
                <div class="pagination">               
                  <span class="prev"></span>
                  <span class="num" id="1">1</span> 
                  <span class="num_active" id="2">2</span> 
                  <span class="num" id="3">3</span> 
                  <span class="num" id="4">4</span> 
                  <span class="num" id="5">5</span> 
                  <span class="num" id="6">6</span> 
                  <span class="next"></span>
                 </div>
  $('.pagination span').click(function(){
	$(".pagination span").removeClass("num_active").addClass("num"); 
	$(".pagination span:first").removeClass("num").addClass('prev');
	$(".pagination span:last").removeClass("num").addClass('next');
        $(this).addClass("num_active"); 
  });

Javascript Code
Please Note – this doesnt work with old version of js File


$('document').ready(function(){
$('#cboCity').live("change", function(){
alert('Hi there');
});

$('#btnChange').on("click", function(){
changeCities();
});
});

function changeCities()
{
strSelect = "<select id='cboCity' name='cboCity'><option>Chennai</option><option>Mumbai</option></select>";
$('#City').html(strSelect);
}

HTML Code

<input id="btnChange" type="button" name="btnChange" value="Change Me" /></pre>
<table>
<tbody>
<tr>
<td>
<div id="City">
<select id="cboCity" name="cboCity"><option>Chennai</option><option>Mumbai</option><option>Delhi</option><option>Kolkatta</option><option>Andrapradesh</option>
</select>

</div>
</td>
</tr>
</tbody>
</table>

Toggle Class does not work by the way you think

.ClassA
{        
  color : green;
}

.ClassB
{
  color : red;
}
 $('document').ready(function(){
   $('.ClassA').on('click', function(){
      alert($(this).attr('class'));
      $(this).toggleClass('ClassB')
   }); 
 });
<div>Class A</div>
<div>Class B</div>

After the first Time ClassA is Applied When you click ClassA both ClassA and ClassB will be applied to the same tag.

The alert message will display output some thing link ClassA ClassB