javascript - PHP and 2 <option> lists, why the $_POST() is not using the name tag...?

Question

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 ??

question from:https://stackoverflow.com/questions/65876536/php-and-2-option-lists-why-the-post-is-not-using-the-name-tag

Answer 1

Your code is incomplete, but the data sent via a POST for a form containing a <select> tag will contain the name of that <select> tag, and the value of whatever selected <option> is selected.

The name attribute that you are adding to the option is not available to the server.

If you were to submit the form in your example, the payload sent to the server will be exactly:

colorSelect=1

Independently of the WHITE, BLUE or GOLD option being selected.