Jump to content
iwato

Force One Select Event from Another Select Event

Recommended Posts

GOAL: Use one <select> element to determine the selected option of another <select> element without destroying the ability of the second <select> element to override the selection made by the first <select> element.

BACKGROUND:  My biggest difficulties in  my attempt to achieve the above goal are:

  1. reading the value of the first <select> element's manually (not the automated) selected option.
  2. forcing the second <select> element to perform as if it were manually selected.

Please consider the following two select statements and answer the following question with jQuery.

<h4>The <em>from</em> Select Input Control</h4>
    <select id='item_podtype_exp' form='rss2_feed' name='item_podtype'>
        <option value='' selected='selected'>Select a type</option>  -->
        <option value='1'>Concept</option>
        <option value='2'>Form and Use</option>
        <option value='3'>Clausal Analysis</option>
        <option value='4'>Linear Analysis</option>
        <option value='5'>Socratic Inversion</option>
    </select>
<h4>The <em>to</em> Select Input Control</h4>
    <select id='itunes_podtype_exp' form='rss2_feed' name='itunes_podtype'>
        <option value='' selected='selected'>Select a type</option>
        <option value=1>Concept</option>
        <option value=2>Form and Use</option>
        <option value=3>Clausal Analysis</option>
        <option value=4>Linear Analysis</option>
        <option value=5>Socratic Inversion</option>
    </select>

QUESTION:  How does one go about achieving the above goal?  Your response will hopefully answer many more questions than I have room for here.

Roddy

Share this post


Link to post
Share on other sites

Just set the second to the first selected value, because the second has no onchange event to it, it acts as normal with ability to override first

            $(function() {

                $('#item_podtype_exp').on('change', function() {
                    $('#itunes_podtype_exp').val($(this).val());
                    
                });
            });

If you wish to disable previous values in second from selected value in first

            $(function() {

                $('#item_podtype_exp').on('change', function() {
                    $('#itunes_podtype_exp').val($(this).val());
                    var first_sel_val = $(this).val();

                    $('#itunes_podtype_exp > option').each(function() {
                        if (parseInt($(this).attr('value')) <= parseInt(first_sel_val) || $(this).attr('value') === "") {
                          
                            $(this).prop('disabled', 'disabled');

                        }
                        else {
                            $(this).prop('disabled', '');
                        }

                    });

                });
            });

 

  • Thanks 1

Share this post


Link to post
Share on other sites

Dsonesuk!

Clearly the first function resolves the issue.  For now, I am able, not only to set the value for the <select> option of the second with the first, but I am also able to reselect from the full range of the second <select> options, if I wish two separate values.  You did much better than I was able with far less code.  Job well done!  Many thanks.

Although it took me some time to understand the second function, I will now archive it for future use.  For,  if the <select> options are properly ordered, it provides a neat mechanism for the process of elimination.

Roddy :rolleyes:

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...