javascript - How do I pass multiple values through <option> value?

I'm making a online shopping item page,

it gets the 'item_id' to loop through a item info db to show its info on the page(price,image,name,whatev)

while using that same 'item_id' to loop through an inventory table(the inventory table has color_id, size_id ,item_id and storage_id) to render a drop down menu(select) to show its color options of that specific item,

i'm using ajax to get the size options of that color_id from the same inventory table. but i can't get the both 'item_id' and color_id passed through the color to narrow down the query together with color_id .

is there a way that i can pass both color_id and item_id through the rendered color to query in inventory table to get the storage_id? because right now i can't narrow it down the the specific item, it gets the size option of a specific color(color_id) but of all items, if without item_id

basically i'm trying to filtering down to the specific storage_id using two drop down menu(color_id ,size_id and product_id) of same table. but having trouble passing 2 (or multiple) values at once.

hope this makes sense?

<select class="form-control" id="colorSelector" onchange = "getSize(this.value)">
   <option value="">Select Color</option>
    <?php show_color_option()?>  --->this is another function to render the colors using item_id
</select>

function getSize(val){
$.ajax({
    type:'POST',
    url:'sizeoptions.php',
    data:"color_id="+ val,
    success:function(data){
        $('#sizeSelect').html(data);
    }
  });
 }
 function getSku(val){
   
  }

///////////////////////////////////sizeoptions.php//////////////////

 <?php

if(isset($_POST['color_id'])){
$query = query("SELECT size_id FROM inventory WHERE color_id = 
".escape_string($_POST['color_id'])." GROUP BY size_id ");

confirm($query);

while($row = fetch_array($query)){
$p_size = display_size($row['size_id']);

$size_options = <<<DELIMETER
<option value="{$row['size_id']}"> {$p_size} </option>

DELIMETER;
      echo $size_options;
    }

}



?>

Solution:

You can get extra information from select box using attributes.

<select class="form-control" id="colorSelector" onchange = "getSize()">
    <option value="xyz" extra-attr="abc">Select Color</option>
</select>

function getSize(){
    var selectedXYZ = $("#colorSelector").val();
    var selectedABC = $("#colorSelector").find("option:selected").attr('extra-attr');

}