Databases
StackOverflow2013
Postsdbo
POjQuery trying to get value of one select option based on result of another select option
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery trying to get value of one select option based on result of another select option
    primarykey
    data
    text
    <p>have the below Javascript already, and a couple of Select Groups. </p> <p>When selecting one of the options in one of the groups, it fills the relavent text box with the text() of that option, and the single ID text box with the val(). This all works fine.</p> <p>but where I am stuck is that , I need to have it , so that when I select an option in one of the select groups, it looks up the option with the same value in the other select group, and then displays the text of that option in the relevant box.</p> <p>e.g. If I pick 'Option1', it displays 'Option1' in the first text box, and 'item1' in the second text box (and 1 in the ID text box). If I pick 'item3', it displays 'item3' in the second text box, and 'option3' in the first text box (and 3 in the ID text box).</p> <p>I got as far as using:</p> <pre><code>var disp = $('#selItem').find('option[value=1]').text(); alert(disp); </code></pre> <p>but can't get the dynamic value to go with 'option[value=1]'.</p> <p>I tried:</p> <pre><code>var thisValue = $('#txtID').val( $(this).val() ); alert(thisValue); </code></pre> <p>but it responds with <code>[object Object]</code>. </p> <p>If anyone can point me in the right direction it would be appreciated.</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script language="JavaScript" src="../Generic/JAVASCRIPT/jquery.js" type="text/javascript"&gt;&lt;/script&gt; &lt;style&gt; .InputField{ width:150px;} &lt;/style&gt; &lt;script&gt; $(document).ready( function() { $('#selOption').change( function() { $('#txtID').val( $(this).val() ); $('#txtOption').val($('#selOption option:selected').html()); } ); $('#selItem').change( function() { $('#txtID').val( $(this).val() ); $('#txtItem').val($('#selItem option:selected').html()); } ); }) &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;select id="selOption" class="InputField"&gt; &lt;option value="" disabled="" selected="" style="display:none;"&gt;Select One...&lt;/option&gt; &lt;option value="1"&gt;Option1&lt;/option&gt; &lt;option value="2"&gt;Option2&lt;/option&gt; &lt;option value="3"&gt;Option3&lt;/option&gt; &lt;/select&gt; &lt;select id="selItem" class="InputField"&gt; &lt;option value="" disabled="" selected="" style="display:none;"&gt;Select One...&lt;/option&gt; &lt;option value="1"&gt;item1&lt;/option&gt; &lt;option value="2"&gt;item2&lt;/option&gt; &lt;option value="3"&gt;item3&lt;/option&gt; &lt;/select&gt; &lt;/br&gt; &lt;input type="text" name="txtOption" id="txtOption" placeholder="Which Option is it?" class="InputField"/&gt; &lt;input type="text" name="txtItem" id="txtItem" placeholder="Which item is it?" class="InputField"/&gt; &lt;/br&gt;&lt;/br&gt; &lt;input type="text" name="txtID" id="txtID" placeholder="ID Number" class="InputField"/&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USNishanth Lawrence
    1. USIGGt
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjQuery trying to get value of one select option based on result of another select option
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POjQuery trying to get value of one select option based on result of another select option
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POjQuery trying to get value of one select option based on result of another select option
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. CO`$('#selItem').val($(this).val());` works like a charm in firefox...what browser are you using?
      singulars
      1. POjQuery trying to get value of one select option based on result of another select option
      1. USMr.Manhattan
    2. COI generally work with Chrome, one of the advantages of not being a 'pro' web developer, I get much more control over which browsers my code runs on.
      singulars
      1. POjQuery trying to get value of one select option based on result of another select option
      1. USIGGt
    3. COi gave you an answer...try it out and give feedback :)
      singulars
      1. POjQuery trying to get value of one select option based on result of another select option
      1. USMr.Manhattan
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload