Force One Select Event from Another Select Event

[iwato]

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

[dsonesuk]

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', '');
                        }

                    });

                });
            });

 

[iwato]

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