Start Building Professional
Web Apps Today

update of second combo box based on first combo box

On my screen ,there are two comboboxes
First combobox has options
<option value="0001">case1</option>
<option value="0002">case2</option>

Second combo box
<option value="0001">0001</option>
<option value="0002">0002</option>

Scenario is -When the user selects one combox value then the value in the other combobox is selected automatically and vice-versa.

What I am trying to do is to call autoSelectCaseName() function and passing the value which the user has selected.But the problem is - the alert I have put in the autoSelectCaseName function is occuring two times on the screen and first time it displays the correct value which the user has selected but second time null value is visible.And finally the null value is passed to the selectOptions () function.

function autoSelectCaseName(value){
        var selectedCaseNumberValue = value;
        alert("selectedCaseNumberValue"+selectedCaseNumberValue);
        $("#selectedCaseName1").selectOptions(selectedCaseNumberValue);
    }

var d=dhtmlXComboFromSelect("selectedCaseNumber");
d.enableFilteringMode(true);
d.attachEvent("onChange",function(){ z.setComboValue(autoSelectCaseName(d.getSelectedValue()));});

Could you please tell me how to overcome this problem.or there is other way of resolving this prooblem.

Thanks in advance!

You are using the correct approach, the only addition to your code which need to be done - some kind of check to prevent infinite calls ( because changing value of one combo will always generate onChange event )
Please check attached sample.

Thanks for the reply.But still it is not working.

The alert in the following function is still coming up twice .And the first time it is coming as the correct value(value selected by the user in the dropdown) but second time it is coming as null (which is causing the problem)

function autoSelectCaseName(value){
        var selectedCaseNumberValue = value;
        alert("selectedCaseNumberValue"+selectedCaseNumberValue);
        $("#selectedCaseName1").selectOptions(selectedCaseNumberValue);
    }

Also.Why the alert is coming up twice as I have put only one alert inside the function.?

Thanks

 

If you attached code to the both combos - you will receive two onChange events , and two calls of custom code

a) comboA changed
b) onChange event of comboA generated
c) custom code called - alert1 shown
d) value of comboB changed to the one from comboA
e) onChange event of comboB generated
f) custom code called - alert2 shown


I'm not pretty sure, how it appears thay you receive a null as value, second time. Such situation may appear if you have not the option with necessary value in second combo. ( the sample attached above , doesn't have the problem with null value )
You can try to use
    combo.getActualValue()
instead of
    combo.getSelectedValue()
It will work correct, even if you are setting value which has not related option.

I have attached onChange event to only one combobox for now.And still getting two alerts

alert("selectedCaseNumberValue"+selectedCaseNumberValue);

with selectedCaseNumberValue as the value which user has selected and selectedCaseNumberValue as null value

 

function autoSelectCaseName(value){
        var selectedCaseNumberValue = value;
        alert("selectedCaseNumberValue"+selectedCaseNumberValue);
        $("#selectedCaseName1").selectOptions(selectedCaseNumberValue);
    }

var d=dhtmlXComboFromSelect("selectedCaseNumber");
d.enableFilteringMode(true);
d.attachEvent("onChange",function(){ z.setComboValue(autoSelectCaseName(d.getSelectedValue()));});

 

Thanks

a) In provided code snippet the autoSelectCaseName returns nothing, so setComboValue will be called with empty parameter ( which is probably not desired scenario  )
b) When you init combo from select box, the onchange event of source selectbox will be mapped to the onChange event automatically ( this can be a reason of double call )