Code:
<script type='text/javascript'>
window.onload = function()
{
  document.getElementById('goDirect').onchange = ddmOnChange;
}
function ddmOnChange()
{
  var url = this.options[this.selectedIndex].value;

  document.location = url;
}
</script>

<form>
<select id='goDirect'>
<option>select</option>
<option value='pg1.php'>Page 1</option>
<option value='pg2.php'>Page 2</option>
</select>
</form>
With the code above, if a user selects Page1, it will go directly to pg1.php without any clicking a submit button.

I like to make it goes to pg1.php with another input text data without any clicking a submit button.

The would-be code below doesn't work correctly, but I hope it show what I want.

Code:
<script type='text/javascript'>
window.onload = function()
{
  document.getElementById('goDirect').onchange = ddmOnChange;
}
function ddmOnChange()
{
  var url = this.options[this.selectedIndex].value;

  document.location = url;
}
</script>

<form method="post">

<input type="text" name="myText" value="myText">
<select id='goDirect'>
<option>select</option>
<option value='pg1.php'>Page 1</option>
<option value='pg2.php'>Page 2</option>
</select>
</form>
In pg1.php I have the code below and I like to get my target result below.
Code:
code in pg1.php
<?php
echo $_POST['myText'];
?>

target result of pg1.php

myText