Link to home
Start Free TrialLog in
Avatar of rdivilbiss
rdivilbissFlag for United States of America

asked on

Update a SELECT list: set option.selected=true without throwing an **undefined** error.

I have a hidden field which contains a value.  I have a SELECT/OPTION list that has no selected options.  After the select is written to the browser, I want to make to option, corresponding to the hidden value to become selected.  The JavaScript below consistantly throws an undefined error when I execute the line to set the correct option's selected value to true.  Funny enough, if I trap the error with a try .. catch block, the assignment works (cross browser).  

Question: >How can I set the correct option to selected without the try .. catch block, without the error and without putting the options into an array and rebuilding the SELECT dynamically with JavaScript?


    <select id="country" name="country" size="1">
          <option value="AF">AFGHANISTAN</option>
            <option value="AL">ALBANIA</option>
            <option value="AD">ANDORRA</option>
            <option value="AO">ANGOLA</option>
            <option value="AI">ANGUILLA</option>
            <option value="AG">ANTIGUA</option>
            <option value="VE">VENEZUELA</option>
            <option value="VN">VIETNAM</option>
            <option value="WF">WALLIS AND FUTUNA ISLANDS</option>
            <option value="YE">YEMEN</option>
            <option value="ZM">ZAMBIA</option>
            <option value="ZW">ZIMBABWE</option>
    </select>
    <input type="hidden" id="cSave" name="cSave" value="VN">
</form>
<script language="javascript" type="text/javascript">
<!--
if (document.getElementById('cSave').value!='') {
      for (var idx=0;idx<document.getElementById('country').options.length;idx++) {
            if (document.getElementById('cSave').value==document.getElementById('country').options[idx].value) {
                  document.getElementById('country').selectedIndex=idx;
                        // The next line throws an undefined error.
                        // if the error is trapped with try .. catch, the option is selected
                        // as desired.  I can live with the try .. catch since I get the
                        // action I need, but I would prefer to get the desired action
                        // without the try .. catch block, if possible.
                  document.getElementById('country').options[idx].selected=true;

                        // THIS WORKS BUT I WANT TO GET RID OF THE TRY .. CATCH
                        //try {
                  //      document.getElementById('country').options[idx].selected=true;
                  //}
                  //catch(e) {
                  //      if(e.error!=undefined) {
                        //           alert(e.error);
                  //      }
                  //}
                  break;
            }
      }      
}
//-->
</script>


Thanks,
Rod
Avatar of rdivilbiss
rdivilbiss
Flag of United States of America image

ASKER

TYPO: I want to make the option corresponding to the hidden value become selected.
ASKER CERTIFIED SOLUTION
Avatar of ldbkutty
ldbkutty
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
You got me?

I probably was having another problem, and decided I needed the selected=true.  However, it does work without the selected=true...so that will do just fine.

Thanks,
Rod

(Still would like to know why the other threw an error, it should be assignable.)

Seems to be one or the other.  If I use the selected=true without the previous selectedIndex = idx no error, If I use selectedIdx = idx without selected=true it also works no error.

The undefined error must be related to using both, although I don;t see why you couldn't set the selected option as many times as you want, but hey my problem is solved, and when you get tired of playing with it, it is time to hand out poinx.

I am supposed to be in bed and that's where I'm headed.  All the best to you and yours in the coming month.

Rod
Glad the problem is solved.

To check a form variable (or an id) in HTML, you can boolean check if the field/value exists or not. For example:

<script>
if(document.forms[0].field_name){
 // do something.
}
else{
 // something else.
}
</script>

However, try..catch is not something to be ignored. Its the nice/better way of cathcing errors. :=)