title: Javascript jQuery - selecting select box option only works sometimes
body: <p>the project is an MVC project writen in PHP</p>
  
  <p>I have an AJAX call in a veiw that echoes, into a div, a bit of Javascript that does some things on the page. At the end of the script is a piece of JQuery that should change a select boxes selected option. I did plenty of research into switching select options on this website and others, and after some playing around i got this bit of code to work:</p>
  
  <pre><code>function filterSet(optValue){
  
      $("#mySelect option").prop('selected', false)
                           .filter('[value="'+ optValue +'"]')
                           .prop('selected', true);
  }
  </code></pre>
  
  <p>The strange thing is, that sometimes it works, sometimes it doesnt. Testing it over the last hour or so, it hasent worked once, but it did work before that, and the only change to the code that i made is a change of the enclosing method name.</p>
  
  <p>the error the console is giving is 'ReferenceError: maple is not defined' where 'maple' is the word in the optValue variable. </p>
  
  <p>ReferenceError: maple is not defined</p>
  
  <p>i dont understand why i would get an undefined error considering the value of the select option is hardcoded into the select html, and ive tried the jquery with hardcoding the option value to what the variable is suppose to pass in, but i still get the same error, this is strange because there once was a time when this code worked perfectly! more than once actually, it worked when testing it several times! but know its not.</p>
  
  <p>select box html:</p>
  
  <pre><code>&lt;select id="mySelect"&gt;
          &lt;option value = 'all' selected&gt; Ward &lt;/option&gt;
          &lt;option value = 'maple'&gt; Maple &lt;/option&gt;
          &lt;option value = 'oak'&gt; Oak &lt;/option&gt;
          &lt;option value = 'w3'&gt; Ward 3 &lt;/option&gt;
          &lt;option value = 'w4'&gt; Ward 4 &lt;/option&gt;
          &lt;option value = 'w5'&gt; Ward 5 &lt;/option&gt;
          &lt;option value = 'w6'&gt; Ward 6 &lt;/option&gt;
  &lt;/select&gt;       
  </code></pre>
  
  <p>can anyone shed some light on this? </p>
  
  <p>how the filterSet method is called. An ajax call causes this script to be echoed into a div on the page, on the success callback of the ajax call filterSet() is called.</p>
  
  <pre><code>echo '
              &lt;script type="text/javascript"&gt;
              function locateSpecific(){
  
              scale = 1;
              height =' . $height . '
              width =' . $width . '
  
              var imageUrl = "' . $imageURL . '";
              var bounds = new L.LatLngBounds([0, 0], [height / scale,width / scale]);
  
              map.removeLayer(markerGroup);
  
              L.imageOverlay(imageUrl, bounds, { noWrap: true, maxZoom: 3, minZoom: -3 }).addTo(map);
  
              }
  
              filterSet('.$loc.');
  
              &lt;/script&gt;
  
              ';
  </code></pre>