如何将所有下拉菜单的值更改为所选的选项？

Question

I am having difficulty figuring out a JavaScript function. I would like for all drop down menus below the selected value to change to that value.

Here is an example of what I want the drop down menus to do:

If I change the value of id 3 in Primer Source to "To Be Saved", then I want all the other drop down menus to change to that value.

I believe I will need a JavaScript function so I made one called changeNote which is called in the onChange of my <select> tag.

Here is my table:

<input type="hidden" id="primerSource_s<?=$i;?>" name="primerSource_s[<?=$i;?>]" value="<?=$abbNotes?>" class="primerSource" />
    <select name="primerSource<?php echo $SampleID; ?>" id="primerSource<?php echo $SampleID; ?>" <?php echo $CSS_display0; ?> value onChange='changeNote(this);' >
          <option value="" >Please Select</option>
          <option value="Premixed" 
            <?php 
                if ("Premixed" == $_POST['primerSource' . $SampleID]) {
                    echo " selected = 'selected' ";
                } elseif (($_POST['primerSource' . $SampleID] == '') && ("Premixed" == $abbNotes)) {
                    echo " selected = 'selected' ";} 
            ?>
          >Premixed
          </option>
          <option value="To Be Saved" 
            <?php 
                if ("To Be Saved" == $_POST['primerSource' . $SampleID]) {
                    echo " selected = 'selected' ";
                } elseif (($_POST['primerSource' . $SampleID] == '') && ("To Be Saved" == $abbNotes)) {
                    echo " selected = 'selected' ";} 
            ?>
          >To Be Saved
          </option>
          <option value="Providing Primer" 
            <?php 
                if ("Providing Primer" == $_POST['primerSource' . $SampleID]) {
                    echo " selected = 'selected' ";
                } elseif (($_POST['primerSource' . $SampleID] == '') && ("Providing Primer" == $abbNotes)) {
                    echo " selected = 'selected' ";} 
            ?>
        >Providing Primer
        </option>
        <option value="Saved Primer(Eton)" 
            <?php 
                if ("Saved Primer(Eton)" == $_POST['primerSource' . $SampleID]) {
                    echo " selected = 'selected' ";
            } elseif (($_POST['primerSource' . $SampleID] == '') && ("Saved Primer(Eton)" == $abbNotes)) {
                    echo " selected = 'selected' ";} 
            ?>
        >Saved Primer(Eton)
        </option>
        <option value="Eton Universal Primer" 
            <?php
                if ("Eton Universal Primer" == $_POST['primerSource' . $SampleID]) {
                    echo " selected = 'selected' ";
                 } elseif (($_POST['primerSource' . $SampleID] == '') && ("Eton Universal Primer" == $abbNotes)) {
                    echo " selected = 'selected' ";} 
            ?>
        >Eton Universal Primer
        </option>
        <option value="To Be Synthesized By Eton" 
            <?php 
                if ("To Be Synthesized By Eton" == $_POST['primerSource' . $SampleID]) {
                    echo " selected = 'selected' ";
                } elseif (($_POST['primerSource' . $SampleID] == '') && ("To Be Synthesized By Eton" == $abbNotes)) {
                    echo " selected = 'selected' ";} 
            ?>
        >To Be Synthesized By Eton
        </option>                               
    </select>

I made this changeNote function, but I went through code from other parts of the website that did what I was asking for. I am not sure why it is not working.

function changeNote(myselectbox){
var value = myselectbox.value;
var elements = document.querySelectorAll('.SampleName');        
var index = parseInt(myselectbox.id.match(/\d+$/));
var filled_rows = 0;        
for( var a = 0, l = elements.length; a < l; a++ ) { 
    if( document.getElementById('.SampleName'+a).value != "") {
        filled_rows++
        console.log(`filled rows: ${filled_rows}`)
    }
}
if(value=="Synthesize"){
            $("#check_space"+index).css("display","block");
            $("#hasOligo"+index).attr("value",true);
            $("#hasOligo"+index).attr("checked",true);
            $("#hasOligo_"+index).attr("value",true);


            $("#PrimerCntr"+index).attr("value","");
            $("#PrimerCntr_t"+index).attr("value","");
            $("#PrimerCntr_t"+index).prop("disabled",true);
            $("#GlobalPrimerCntr"+index).val("");
            $("#GlobalPrimerCntr"+index).prop("disabled",true); 

            $("#Notes_s"+index).val("Synthesize");
            $("#Notes"+index).attr("value","Synthesize");
            $("#Notes_s"+index).prop("disabled",true);  

            $("#primerSource"+index).val("Synthesize");
            $("#primerSource_s"+index).attr("value","Synthesize");
            $("#primerSource"+index).prop("disabled",true);
            console.log('this is working')
}else{

for( var i = index; i < filled_rows; i++ ) { 
    if(document.getElementById('primerSource'+i).value != "" && document.getElementById('primerSource'+i).hasAttribute("disabled")==false){
        document.getElementById('primerSource_s'+i).value = value;
        document.getElementById('primerSource'+i).value = value;
        console.log('primer is working')
    }
} console.log('else is working')
}

}

Please help me figure out how to make that function! I am not sure if my logic makes sense or not. Any help would be nice since I have been stuck on this for a while. Thank you for your help!

Answer 1

This can be done using the .nextAll method:

$(document).ready(function () {
    $('select[id^=primerSource-]').on('change', function(){
        var selectedValue = $(this).val();
        $(this).nextAll('select[id^=primerSource-]').each(function(){
            if ($(this).val() !== selectedValue) {
                $(this).val(selectedValue);
            }
        })
    });
});