I have a simple dropdown list, whose values are from the DB.I am doing it as

$query = "SELECT id,location_name FROM misc_location";
if ( $result = mysql_query($query) ) {
    $selectLoco = "<select name='selectLoco' id='selectLoco'>";
     while ($row = mysql_fetch_row($result) ) {
        $selectLoco .= "<option value='$row[0]''> $row[1] </option>";
     }
     $selectLoco .= "</select>";
} 

But now i have a text box below the dropdown. So when user selects a dropdown item ,I need to pull a value corresponding the item selected and display in the text box.

Table : misc_location

id   location_name   time
1    Ben             7.00 am
2    Cat             8.00

Location : Drop-down user selects Ben , Text box below should display 7.00

I have a simple dropdown list, whose values are from the DB.I am doing it as

$query = "SELECT id,location_name FROM misc_location";
if ( $result = mysql_query($query) ) {
    $selectLoco = "<select name='selectLoco' id='selectLoco'>";
     while ($row = mysql_fetch_row($result) ) {
        $selectLoco .= "<option value='$row[0]''> $row[1] </option>";
     }
     $selectLoco .= "</select>";
} 

But now i have a text box below the dropdown. So when user selects a dropdown item ,I need to pull a value corresponding the item selected and display in the text box.

Table : misc_location

id   location_name   time
1    Ben             7.00 am
2    Cat             8.00

Location : Drop-down user selects Ben , Text box below should display 7.00

• javascript
• php
• jquery
• mysql
• drop-down-menu

4 Answers 4

You need to assign an event listener for your select:

<select name='selectLoco' id='selectLoco' onchange="$('#textboxid').val(this.value);">

And correct your php. You have the quotes twice where you output the option value. You might also want to update the value on load.

Here's a jsfiddle link

And a rather better example:

<select name='selectLoco' id='selectLoco' onchange="updateValue();">
    <option value="123">aaa</option>
    <option value="456">bbb</option>
</select>
<input type="text" id="textboxid" />

<script type="text/javascript">
//the function that takes care of the updating
function updateValue()
{
    $('#textboxid').val($('#selectLoco').val());
}

//update once the page has loaded too
$(document).ready(function () {
    updateValue();
});
</script>

I got a work around , based on the answers using ajax + json here its how i did it

The jquery

$('#selectLoco').on('change', function(){
    selectLoco = $('#selectLoco option:selected').val(); // the dropdown item selected value
    $.ajax({
        type :'POST',
        dataType:'json',
        data : { selectLoco : selectLoco },
        url : 'getresult.php',
        success : function(result){
         $('#textBoxIwant).val(result['WeekDaySm']);// json result      
        }
    });

});

The PHP

<?php 
require_once ('../config/db.config.php');

$selectLoco = $_POST['selectLoco'];
$query = "SELECT * FROM misc_location WHERE id = '$selectLoco' ";

$result = mysql_query($query);
$row = mysql_fetch_assoc($result);
echo json_encode($row);
 ?>

Can you try this, using onchange firing event you can able to call javascript function and you populate the value. myvalue you can replace your textbox id instead.

  $selectLoco = "<select name='selectLoco' id='selectLoco'  onchange='UpdateTextbox(this)'>";
     while ($row = mysql_fetch_row($result) ) {
        $selectLoco .= "<option value='$row[0]'> $row[1] </option>";
     }
     $selectLoco .= "</select>";

  echo '<input id="myvalue" type="text">';

javscript:

 function UpdateTextbox(d){  
          document.getElementById('myvalue').value = d.value;
 }

if using Jquery to implement:

   $(function(){
    $('#selectLoco').change(function(){
       $("#myvalue").val($(this).val());
     });
   });

Add a custom data attribute to the select to representing time and then access it with jQuery.

$query = "SELECT id,location_name FROM misc_location";
if ( $result = mysql_query($query) ) {
    $selectLoco = "<select name='selectLoco' id='selectLoco'>";
     while ($row = mysql_fetch_row($result) ) {
        $selectLoco .= "<option value='$row[0]' data-time='$row[2]'> $row[1] </option>";
     }
     $selectLoco .= "</select>";
} 

Jquery below:

$('#selectLoco').on('change',function(e){
    $('#textboxid').val($(this).children(':selected').attr('data-time'))
});

JSfiddle here