Find it:

Tuesday, July 9, 2013

Show hide Div based on select value

Practical JQuery script to show a Div based on a select value:


<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
  var Privileges = jQuery('#privileges');
var select = this.value;
Privileges.change(function () {
   if ($(this).val() == 'custom') {
$('.resources').show();
   }
   else $('.resources').hide();
});
});
</script>
<div>
    <label>Privileges:</label>
    <select name="privileges" id="privileges" class="" onclick="craateUserJsObject.ShowPrivileges();">
        <option id="all" value="all">All</option>
        <option id="custom" value="custom">Custom</option>
    </select>
</div>
<div class="resources" style=" display: none;">resources</div>

Just needed JQuery 1.9.1 

Monday, July 8, 2013

Simple jQuery Dependent Selects

Some very usefull script is to put in a form two or more selects with dependencies. For example if you want to show the cities only when you have selected the country.

The next library is a very simple way to do it using JQuery.

https://github.com/simpleweb/jquery-dependent-selects

The only code you hace to write is like this.

<select name="location" class="dependent-demo1">
<option></option>
<option value="238">London > North > Enfield</option>
<option value="239">London > North > Barnet</option>
<option value="240">London > South > Croydon</option>
<option value="241">London > South > Bromley</option>
<option value="242">London > South > Sutton</option>
<option value="243">Bristol > St Pauls</option>
<option value="244">Bristol > Horfield</option>
<option value="245">Bristol > Bedminster</option>
<option value="246">Bournemouth</option>
</select>

$(function(){
$('.dependent-demo1').dependentSelects();
})

Adding the JQuery library and the depend select one.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.dependent-selects.js"></script>