how do i can join two or more selects values in one span? : i want to join or combine two or more select options in one span using jquery or Javascript, like this:

    <body>
    <label>Product:</label> <select id='Product' value='Product'>
		
	<option value=" " selected>--Select your Product--</option>
            <option>Option 1</option>
            <option>Option 2</option>           
          </select>
	
    <label>Subproduct:</label> <select id='SubProd' value='SubProd'>
		
	<option value=" " selected>--Select your Subproduct--</option>
            <option>Sub 1</option>
            <option>Sub 2</option>
          </select>
         <br>
        <span id="joined"></span>
       </body>

in the span i want that the output shows "Product1/Sub1" depending on the option selected. i've been searching but i can't find something useful for me

thanks in advance and i'm sorry if i have grammar errors.