title: jQuery select option elements by value
body: <p>I have a select element wrapped by a span element. I am not allowed to use the select id but I am allowed to use the span id.
  I am trying to write a javascript/jquery function in which the input is a number i, which is one of the values of the select's options. The function will turn the relevant option to selected.</p>
  
  <pre><code>&lt;span id="span_id"&gt;
      &lt;select id="h273yrjdfhgsfyiruwyiywer" multiple="multiple"&gt;
          &lt;option value="1"&gt;cleaning&lt;/option&gt;
          &lt;option value="2"&gt;food-2&lt;/option&gt;
          &lt;option value="3"&gt;toilet&lt;/option&gt;
          &lt;option value="4"&gt;baby&lt;/option&gt;
          &lt;option value="6"&gt;knick-knacks&lt;/option&gt;
          &lt;option value="9"&gt;junk-2&lt;/option&gt;
          &lt;option value="10"&gt;cosmetics&lt;/option&gt;
      &lt;/select&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>I wrote something as follows (this does not completely work, which is why I am posting this question):</p>
  
  <pre><code>function select_option(i) {
  
      options = $('#span_id').children('select').children('option');
      //alert(options.length); //7
      //alert(options[0]); //[object HTMLOptionElement]
      //alert(options[0].val()); //not a jquery element
      //alert(options[0].value); //1
  
      //the following does not seem to work since the elements of options are DOM ones not jquery's
      option = options.find("[value='" + i + "']");
      //alert(option.attr("value")); //undefined
      option.attr('selected', 'selected');
  
  }
  </code></pre>
  
  <p>Thanks!</p>