0

Why does this condition always execute the ELSE and not the IF branch. Here's the javascript:

$(document).ready(function(){

if (document.getElementById("analyses").value == 'distance'){

loadScript('/static/distance.js', function()
{
     console.log('done loading');
    });
}else{
loadScript('/static/geoClusters.js', function()
{   
console.log('done loading');
});
 }
});

The form has several select tags with different option values as such:

<select name="analysis" id="analyses">
     <option value="" disabled="disabled" selected="selected">Select Analysis</option>
      <option value="distance">distance</option>
      <option value="clustered">clustering</option>
</select>

I can't see what's wrong with the if-else statment.

Thanks

EDIT

Thanks for all the great suggestions, I think the way the code is structured the way suggested by @trebuchet works:

$("#analyses").bind("change",function(){
.............code.......
});

Thank you everyone.

1

3 Answers 3

6

You actually can't use value like that on an HTML select element -- it has the property selectedIndex, but not selectedValue. JQuery does implement val() on select elements, though:

if ($("#analyses").val() == 'distance')

If you're doing it with straight Javascript, then you have to first get the selected index, then the value from the option element:

var sel = document.getElementById("analyses");
if (sel.options[sel.selectedIndex].value)

To answer your question, with the original code, Javascript will always execute the else branch, because document.getElementById("analyses").value is undefined, which Javascript typecasts as "false" in a boolean statement.

Fiddle.

3
  • Thanks. I tried your example in fiddle and modified it a bit, but I get the same problem. jsfiddle.net/9EAsm/7
    – user94628
    Dec 5, 2012 at 23:58
  • @user94628 there are script errors in your Fiddle ... see here: jsfiddle.net/kMHVS/1
    – McGarnagle
    Dec 6, 2012 at 0:00
  • 1
    Thanks for the help...the way my code was set up it wasn't working. Thank you for your help.
    – user94628
    Dec 6, 2012 at 0:12
2

The way your code is structured it will only run once on page load - in which case the value of the select will always be an empty string. If you want it to respond to changes:

$("#analyses").bind("change",function(){

    if (document.getElementById("analyses").value == 'distance'){

        loadScript('/static/distance.js', function()
        {
           console.log('done loading');
        });
    }else{
        loadScript('/static/geoClusters.js', function()
        {   
            console.log('done loading');
        });
     }
});
0
1

at the time of document.ready fires, the value of analyses is always going to be "" because that is the default selected option. I'm not sure since the first option is disabled why this happens but apparently that's what is happening.

If you change the default selected option value to "distance" then it does fire you can see here:

<select name="analysis" id="analyses">
     <option value="" disabled="disabled">Select Analysis</option>
      <option value="distance" selected="selected">distance</option>
      <option value="clustered">clustering</option>
</select>​

I posted a test here too: http://jsfiddle.net/BKD4u/

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.