Jump to content

Force One Select Event from Another Select Event


iwato
 Share

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

Link to comment
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
Link to comment
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:

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...