Click Event And Option Value

Here i come with two question one is on onload all listbox to be hide depend of radio button listbox had to show/hide listbox but its not working here and other one is i have to c

Solution 1:

Had a look at the fiddle provided

Fiddle http://jsfiddle.net/Varinder/tHXN3/1/

It is considered bad practice to inline JS event calls.

Usualy it is a good indication to refactor if you notice the logic being repeated more than three times.

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

• show a bunch or dependant fields based on the radio button selected
• reset all the fields that are not related to currently active radio button
• on page load strip off all the select box options that are either having "Null value" or simply an empty string.

A little bit of refactoring on HTML side of things can go a long way when traversing it via jQuery:

Heres the structure i reckon will suit your requirement ( more on this further down ). And i've simplified it a bit by only working on the 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 to 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 to 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 the use of data-attributes in this case its data-dependson which contains class name of div containing dependant fields

JS

Start off by caching references to all the elements that will be (ab)used:

var $aGroupRadioButtons = $("input[name='A']");
var $formRow = $(".form-row");
var $allDropdowns = $formRow.find("select");

Handling FormSections ( .maingroup-section, .subgroup-section etc ) can be abstracted away in a function like below, it takes reference to currently active formsection and hides and resets the value of sibling form sections.

function handleFormSections( $formSection ) {
    var $currentFormSection = $formSection.show();
    var $otherFormSections = $currentFormSection.siblings().hide();

    resetFormSections( $otherFormSections );
}

And resetFormSections function resets input and select elements of the form sections provided by the argument

function resetFormSections( $formSections ) {
    $formSections.find("select").val("");
    $formSections.find("input").val("")
}

Well, the above two functions are good enough to show dependant form section, hide and reset other form sections.

Now you can hook up those functions via event handlers, im using jQuery 1.8 so i can use $(selector).on("event", handler) syntax.

$aGroupRadioButtons.on("click", function(e) {
    var $radioItem = $( this );
    var dependantSectionName = $radioItem.attr("data-dependson");
    var $dependantSectionElement = $( dependantSectionName );

    handleFormSections( $dependantSectionElement )
});

As from the code above, its looking at the data-dependson value to identify which form section to show and which ones to hide.

And somewhere along the line you'd want to strip off empty or null values. Again, how about we create a function to handle that for us? and maybe call it removeNullOrEmptyOptionsFrom( selectBox ) which will recieve a selectBox element to 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, you can call the above function on every select box in the .form-row container like below:

$allDropdowns.each(function() {
    removeNullOrEmptyOptionsFrom( this );
});

I noticed in your code there is a call to combobox method, if it is a jQuery plugin then probably a good idea to call it after we've stripped off all the null or empty options:

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