option selected base on a value javascript with chosen plugin
<p>I am trying to <code>select</code> a <code>option</code> based on the input given by the user in my <code>select</code> with a <code>chosen</code> plugin. My code works when I remove the <code>data-rel="chosen"</code>. This is my code.</p>

<pre><code>        function editUser () {
        var tldArray = new Array();
            $("select#extname &gt; option").each(function(){
                tldArray.push($(this).val());
            });

            for (index = 0;index &lt; tldArray.length;index++) {
                if (tldArray[index] == document.getElementById('extselect').value) {
                    $('#extname').val( $.trim( tldArray[index] ) );
                }
            }
        }
</code></pre>

<p>this is my <code>select</code>:</p>

<pre><code>&lt;select id="extname" data-rel="chosen" class="input-small" data-placeholder="Ext. Name"&gt;
    &lt;option value=""&gt;&lt;/option&gt;
    &lt;option value="SR"&gt;SR&lt;/option&gt;
    &lt;option value="JR"&gt;JR&lt;/option&gt;
    &lt;option value="3rd"&gt;3rd&lt;/option&gt;
    &lt;option value="4th"&gt;4th&lt;/option&gt;
    &lt;option value="5th"&gt;5th&lt;/option&gt;
    &lt;option value="6th"&gt;6th&lt;/option&gt;
    &lt;option value="7th"&gt;7th&lt;/option&gt;
    &lt;option value="8th"&gt;8th&lt;/option&gt;
    &lt;option value="9th"&gt;9th&lt;/option&gt;
    &lt;option value="10th"&gt;10th&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>and this is my <code>input</code></p>

<pre><code>&lt;input class="input focused" id="extselect" style="margin-top:-15px" type="text" placeholder="First Name"&gt;

&lt;button value='$key-&gt;id' class='btn btn-mini btn-info' href='#' onclick='editUser(this)'&gt;
</code></pre>

<p>How can I make this work with a <code>chosen</code> plugin?</p>