PHP或jQuery Auto Populate选择框，带有文本框数据

Question

I want to auto populate a select box I have placed on a new submissions page generated by the Joomla ZOO component.

This is because I have an alphabetical category structure. A-Z I was hoping to use PHP or jQuery to take the first character from the NAME: text box and to use this to determine the category

I have managed to auto select one of the fields to 'true' which works... (the 'publish?' checkbox, but I have now hidden it using css)

This is what the user see's, I want the category to automatically select the first letter of the select element and use that to determine the category... E.g. "Alpha" would then auto fill the category to "A"... I will post the source code and php code beneath. Link to Image as I do not have enough reputation (new account)

http://imageshack.com/a/img607/4210/8gpe.png

I was thinking perhaps PHP or Jquery.

The logical process In my opinion would be to:

1.User Enters Name into Text field 2.Run function when user is off 'onfocus' on the text field. 3.Store First Entered text into variable from Textbox $NameCat (Name Category) 4.Compare stored text variable $NameCat to an Array containing the Category values 5.Set select box value to the compared value of $NameCat

Current parts of this operation I can find...

Source code after page has been compiled:

             <td valign="top"  width="100%" > 
  <table width="100%"  border="0" cellspacing="0" cellpadding="0" style="border-top: 5px solid #ffffff;">


<tr align="left" valign="top">
<td colspan="3" style="border-top: 3px solid #ffffff; padding: 3px;">
<div class="main">


<div id="yoo-zoo" class="yoo-zoo documentation-default documentation-default-edit">

    <div class="submission">

        <h1 class="headline">Add Glossary Item</h1>



<form id="item-submission" action="/the-glossary/new-glossary-entry/submission/submission/edit/glossary-item/df423936f97317ac69cac8270f5edef0" method="post" name="submissionForm" accept-charset="utf-8" enctype="multipart/form-data">


<fieldset class="pos-content creation-form">
    <legend>Glossary Item</legend>

        <div class="element element-itemstate first">
    <strong><div style="display:none;">Publish?</div></strong>
    <input type="radio" name="elements[_itemstate][value]" id="elements[_itemstate][value]0" value="0"  checked="checked" />
    <label for="elements[_itemstate][value]0" id="elements[_itemstate][value]0-lbl" class="radiobtn">No</label>
    <input type="radio" name="elements[_itemstate][value]" id="elements[_itemstate][value]1" value="1"  />
    <label for="elements[_itemstate][value]1" id="elements[_itemstate][value]1-lbl" class="radiobtn">Yes</label>
</div>
<div class="element element-itemname required">
    <strong>Glossary Item</strong><input type="text" name="elements[_itemname][value]" size="60" value="" /></div>
<div class="element element-textarea">
    <strong>Description</strong><div class="repeatable-content">

<textarea rows="20" cols="60" style="width:100%;height:350px" id="elements_eb90a34e-2f96-4407-99ce-529ec19e8e63_0_value" name="elements[eb90a34e-2f96-4407-99ce-529ec19e8e63][0][value]"></textarea>
<div id="editor-xtd-buttons">
<div class="button2-left" id="">
<div class="image" id="">
<a rel="{handler: 'iframe', size: {x: 800, y: 500}}" href="http://pi.portinfo.co.uk/index.php?option=com_media&amp;view=images&amp;tmpl=component&amp;e_name=elements_eb90a34e-2f96-4407-99ce-529ec19e8e63_0_value&amp;asset=871&amp;author=91" class="modal-button" id="">Image</a></div></div></div>
</div>
<span class="delete" title="Delete Element"></span></div>
<div class="element element-itemcategory last">
    <strong>Categories</strong>
<div>
    <select id="elements_itemcategoryvalue" name="elements[_itemcategory][value][]" title="Category" size="15" multiple="multiple">
    <option value="16">&nbsp;&nbsp;-&nbsp;Guide To Port Entry Glossary</option>
    <option value="17">&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;-&nbsp;A</option>
    <option value="35">&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;-&nbsp;B</option>
    <option value="36">&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;-&nbsp;C</option>
    <option value="37">&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;-&nbsp;D</option>
    <option value="38">&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;-&nbsp;E</option>
    <option value="39">&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;-&nbsp;F</option>
    <option value="40">&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;-&nbsp;G</option>
    <option value="41">&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;-&nbsp;H</option>
    <option value="42">&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;-&nbsp;I</option>
    <option value="43">&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;-&nbsp;K</option>
    <option value="44">&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;-&nbsp;L</option>
    <option value="45">&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;-&nbsp;M</option>
    <option value="46">&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;-&nbsp;N</option>
    <option value="47">&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;-&nbsp;O</option>
    <option value="48">&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;-&nbsp;P</option>
    <option value="49">&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;-&nbsp;Q</option>
    <option value="50">&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;-&nbsp;R</option>
    <option value="51">&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;-&nbsp;S</option>
    <option value="52">&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;-&nbsp;T</option>
    <option value="53">&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;-&nbsp;U</option>
    <option value="54">&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;-&nbsp;V</option>
    <option value="55">&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;-&nbsp;W</option>
</select>
    </div>

<script type="text/javascript">
    jQuery(function($) {
        var categories_elem = $('#elements_itemcategoryvalue'), primary_elem = $('#elements_itemcategoryprimary');
        if (!categories_elem || !primary_elem) return;

        categories_elem.bind('change', function() {
            var categories = $(this).val() ? $(this).val() : [], primary = primary_elem.val();
            if ($.inArray(primary, categories) == -1) primary_elem.val(categories.length ? categories.shift() : '');
        });

        primary_elem.bind('change', function() {
            var categories = categories_elem.val() ? categories_elem.val() : [], primary = $(this).val();
            if ($.inArray(primary, categories) == -1) {
                categories.push(primary);
                categories_elem.val(categories);
            }
        });
    });
</script></div> 
</fieldset>




    <p class="info">Fields marked with an asterisk (*) are required.</p>

    <div class="submit">
        <button type="submit" id="submit-button" class="button-green">Submit Item</button>
            </div>

    <input type="hidden" name="option" value="com_zoo" />
    <input type="hidden" name="controller" value="submission" />
    <input type="hidden" name="task" value="save" />

    <input type="hidden" name="59bca78d9dbba20feb40df6543d2ff2c" value="1" />
</form>

<script type="text/javascript">
    jQuery(function($) {
        $('#item-submission').EditItem();
        $('#item-submission').Submission({ uri: 'http://pi.portinfo.co.uk/' });
    });
</script>
    </div>
</div>
<!-- Auto-set Published option to 'true' -->
<script type="text/javascript">
jQuery(function($){
$(".element-itemstate [value=1]")[0].checked = true;
});
</script>
</div>
</td>        
</tr>
  </table>
  </td>

If you have any answers or suggestions please don't feel hesitant to share them, they are greatly appreciated.

P.s. I have only done approx 2-3 weeks of self taught PHP so I know about POST/GET/MYSQL connections/getElementById and other little things like string functions... so I do understand a little about it... but I am not a wizard in PHP yet. Perhaps its jQuery that is needed?

Sorry this website is an internal site, So I cannot give you a link... But if you have any questions at-all I will be AQAP to reply.

Many Thanks Josh.