PHP and 2 lists, why the $_POST() is not using the name tag…?

I’m trying to use the following code (https://codepen.io/enogrob/pen/OwjrGy) in my form and running into an issue with the $_POST() not pulling the name”” tag, it references the value”” tag which in this case isn’t helpful.

The 1st SELECT:

<select id="canvasSelect" name="canvasSelect" class="btn btn-outline-secondary dropdown-toggle form-control" data-toggle="dropdown">
    <option>choose...</option>
    <option value="1">Canvas 1</option>
    <option value="2">Canvas 2</option>
</select>

The select code looks like this:

<select id="colorSelect" name="colorSelect" class="btn btn-outline-secondary dropdown-toggle form-control" data-toggle="dropdown">
    <option>choose...</option>
    <option name="6" value="1">WHITE</option>
    <option name="7" value="1">BLUE</option>
    <option name="8" value="1">GOLD</option>
    <option name="9" value="2">BLUE</option>
    <option name="10" value="2">GOLD</option>
</select>

and the java script implementation like this:

<script type="text/javascript">
        var $select1 = $( '#canvasSelect' ),
            $select2 = $( '#colorSelect' ),
            $options = $select2.find( 'option' );
            
        $select1.on( 'change', function() {
            $select2.html( $options.filter( '[value="' + this.value + '"]' ) );
            $('#colorSelect').val(''); //add this line for blank selection
        } ).trigger( 'change' );

</script>

Is there a way to fix this or is there a better way to drive a second select from another ??

Answer

I solved this problem by creating a custom attribute on the 2nd SELECT combined with a hidden input using the following:

<select id="colorSelect" name="colorSelect" class="btn btn-outline-secondary dropdown-toggle form-control" data-toggle="dropdown">
    <option>choose...</option>
    <option colorID="6" value="1">WHITE</option>
    <option colorID="7" value="1">BLUE</option>
    <option colorID="8" value="1">GOLD</option>
    <option colorID="9" value="2">BLUE</option>
    <option colorID="10" value="2">GOLD</option>
</select><input type="hidden" id="custAtt" name="colorID" />

and the script that goes with it:

<script>
    $(function() {
        $("#colorSelect").change(function(){
            var option = $('option:selected', this).attr('colorID');
            $('#custAtt').val(option);
        });
    });
</script>