javascript - Click Event and option value -

here come 2 question 1 on onload listbox hide depend of radio button listbox had show/hide listbox not working here , other 1 have check if listbox option value contain null value or empty space if means have remove it. thats not working there mistake in code 1 on .

<script>     if ($('input[name=b]:checked').val() == "city") {          $("#country,#zone,#state,#areamanager,#outlet").val('');          $("#country_value,#zone_value,#state_value,#areamanager_value,#outlet_value").val('');         $("#city").show();          $("#country,#zone,#state,#areamanager,#outlet").hide();       }      $.each(main, function (i, val) {         if (val == "null value" || val == "") {             val = null;         }     }); </script> 

refer link

had @ fiddle provided

fiddle http://jsfiddle.net/varinder/thxn3/1/

it considered bad practice inline js event calls.

usualy indication refactor if notice logic being repeated more 3 times.

correct me if im wrong, you're requirements are:

• show bunch or dependant fields based on radio button selected
• reset fields not related active radio button
• on page load strip off select box options either having "null value" or empty string.

a little bit of refactoring on html side of things can go long way when traversing via jquery:

heres structure reckon suit requirement ( more on further down ). , i've simplified bit working on first radio button row:

<table cellpadding="0" cellspacing="0" border="2">     <tr>         <td><input type="radio" name="a" data-dependson=".maingroup-section"/></td>         <td><font size="2">main group</font></td>             <td><input type="radio" name="a" data-dependson=".subgroup-section"/></td>         <td><font size="2">sub group</font></td>             <td><input type="radio" name="a" data-dependson=".itemname-section" /></td>         <td><font size="2">item name</font></td>     </tr> </table>  <div class="form-row">     <div class="maingroup-section">         field values related main group:<br />         <select id="maingroup">             <option value="null value">null value</option>              <option value="1">aa</option>             <option value="2">bb</option>             <option value="3">cc</option>             <option value="null value">null value</option>         </select>         <input type="hidden" id="maingroup_value" />     </div>      <div class="subgroup-section">         field values related subgroup:<br />         <select id="subgroup">             <option value="null value">null value</option>              <option value="1">dd</option>             <option value="2">ee</option>             <option value="3">ff</option>             <option value="null value">null value</option>          </select>         <input type="hidden" id="subgroup_value" />     </div>      <div class="itemname-section">         field values related itemname:<br />         <select id="itemname">             <option value="null value">null value</option>              <option value="1">gg</option>             <option value="2">hh</option>             <option value="3">ii</option>             <option value="null value">null value</option>          </select>         <input type="hidden" id="itemname_value" />     </div> </div> 

first things first, you'll notice use of data-attributes in case data-dependson contains class name of div containing dependant fields

js

start off caching references elements (ab)used:

var $agroupradiobuttons = $("input[name='a']"); var $formrow = $(".form-row"); var $alldropdowns = $formrow.find("select"); 

handling formsections ( .maingroup-section, .subgroup-section etc ) can abstracted away in function below, takes reference active formsection , hides , resets value of sibling form sections.

function handleformsections( $formsection ) {     var $currentformsection = $formsection.show();     var $otherformsections = $currentformsection.siblings().hide();      resetformsections( $otherformsections ); } 

and resetformsections function resets input , select elements of form sections provided argument

function resetformsections( $formsections ) {     $formsections.find("select").val("");     $formsections.find("input").val("") } 

well, above 2 functions enough show dependant form section, hide , reset other form sections.

now can hook functions via event handlers, im using jquery 1.8 can use $(selector).on("event", handler) syntax.

$agroupradiobuttons.on("click", function(e) {     var $radioitem = $( );     var dependantsectionname = $radioitem.attr("data-dependson");     var $dependantsectionelement = $( dependantsectionname );      handleformsections( $dependantsectionelement ) }); 

as code above, looking @ data-dependson value identify form section show , ones hide.

and somewhere along line you'd want strip off empty or null values. again, how create function handle us? , maybe call removenulloremptyoptionsfrom( selectbox ) recieve selectbox element work on, heres how:

function removenulloremptyoptionsfrom( selectbox ) {     var $selectboxoptions = $(selectbox).children();      $selectboxoptions.each(function() {         var $option = $(this);         var optionvalue = $option.attr("value");         if ( optionvalue == "null value" || optionvalue == "" ) {             $option.remove();         }     }); } 

now, can call above function on every select box in .form-row container below:

$alldropdowns.each(function() {     removenulloremptyoptionsfrom( ); }); 

i noticed in code there call combobox method, if jquery plugin idea call after we've stripped off null or empty options:

// $alldropdowns.combobox(); // initialize combox once maybe after reseting selects?