Want to traverse tree the next div for a child div

i had the following scenario that i wanted to show a specific next div in case the parent input chosen like the following :

please see the following link for more information

http://stackoverflow.com/a/18206881/868103

Chosen plugin jquery

Sometime you will need to disable a field and make it enable on the previous field is change and chosen option in it , you can achieve that by doing the following


<select data-placeholder="Type of services" class="chzn-select" style="width:172px" id="os_services">
 <option value=""></option>
 <option value="personal">Personal</option>
 <option value="buisness">Buisness</option>
 </select>
 <img src="img/tip.png" alt="tip" class="tooltip" width="17" height="17" title="<b>Personal:</b> a professional translator translates your personal (non-business) documents.<br/><br/><b>Business:</b> a translation that has been checked by a qualified proofreader to minimize the frequency of error."/>
 <select data-placeholder="Type of document" class="chzn-select" style="width:172px" id="os_type" disabled>
 <option value=""></option>
 <option value="General">General</option>
 <option value="Legal">Legal</option>
 <option value="Technical">Technical</option>
 <option value="Literary">Literary</option>
 <option value="Marketing">Marketing</option>
 <option value="Medical">Medical</option>

 </select>
 </div>

 


// Remove the disable from the type of service when selected value changed
 $('#os_services').chosen().change(function(){
 $("#os_type").attr('disabled', true).trigger("liszt:updated");
 var service = $(this).find("option:selected").text();
 switch(service)
 {
 case 'personal':
 $("#os_type").attr('disabled', true).trigger("liszt:updated");
 break;
 case 'Buisness':
 $("#os_type").attr('disabled', false).trigger("liszt:updated");
 break;

 }
 });

 


// original form in the html not the one div with chosen plugin
// all the trick goes in the trigger function to update the chosen again after certain action happened

$("#original_form_field").attr('disabled', true).trigger("liszt:updated");

for more information please review the following :

https://github.com/harvesthq/chosen/issues/67#issuecomment-2170256

Difference between e.preventDefault and e.preventPropagation ?

There big difference between them that `e.preventDefault` uses to prevent the default action of the browser for event like click but the parent DOM still be affected by the click event
`e.preventPropagation` prevent the event for the parent DOM also

For more information see the following links :

http://stackoverflow.com/a/5963688/868103
http://davidwalsh.name/javascript-events