I have a code which is used to populate the words from text file to listbox. If i select any value from listbox then it display a selected word within the text box (within the form - to post the value to another script)

javascript code:

<script>
  function getSelectedValue(theValue){
    document.getElementById('pasteTheValue').innerHTML=theValue;
  }
</script>

php code:

//open the file
$read_your_file = @fopen($your_file, "r") or die ("Couldn't Access $your_file");

//create a variable to hold the contents of the file
$contents_your_file = fread($read_your_file, filesize($your_file));

//array of file contents
$your_array = explode("\n",$contents_your_file);

//close the file
fclose($read_your_file);

//counts the number elements in the property_categories array
$num_elmnts_array = count($your_array) ;

//elements in the drop down list
//$drop_elmnts = 0;

//begin creating your dropdown menu...

$your_menu = "<select name=\"list\" onchange=\"getSelectedValue(this.value)\">";  
//For loop to begin
for($counter = 0; $counter < $num_elmnts_array; $counter++){
$your_menu .= "<option value=\"$your_array[$counter]\">$your_array[$counter]        </option>";
//$counter++;
}
//end select menu
$your_menu .= "</select>";
?>

<p><b><?php echo "$your_menu"; ?></b><br>
<p id="pasteTheValue"></p>

This works fine. This display a selected word as usual normal text within the page. But i want to show this (or get the value) within the text box. Please help me to solve this.

I have a code which is used to populate the words from text file to listbox. If i select any value from listbox then it display a selected word within the text box (within the form - to post the value to another script)

javascript code:

<script>
  function getSelectedValue(theValue){
    document.getElementById('pasteTheValue').innerHTML=theValue;
  }
</script>

php code:

//open the file
$read_your_file = @fopen($your_file, "r") or die ("Couldn't Access $your_file");

//create a variable to hold the contents of the file
$contents_your_file = fread($read_your_file, filesize($your_file));

//array of file contents
$your_array = explode("\n",$contents_your_file);

//close the file
fclose($read_your_file);

//counts the number elements in the property_categories array
$num_elmnts_array = count($your_array) ;

//elements in the drop down list
//$drop_elmnts = 0;

//begin creating your dropdown menu...

$your_menu = "<select name=\"list\" onchange=\"getSelectedValue(this.value)\">";  
//For loop to begin
for($counter = 0; $counter < $num_elmnts_array; $counter++){
$your_menu .= "<option value=\"$your_array[$counter]\">$your_array[$counter]        </option>";
//$counter++;
}
//end select menu
$your_menu .= "</select>";
?>

<p><b><?php echo "$your_menu"; ?></b><br>
<p id="pasteTheValue"></p>

This works fine. This display a selected word as usual normal text within the page. But i want to show this (or get the value) within the text box. Please help me to solve this.

• javascript
• php
• jquery
• html

• Do you want to iterate your options with jquery, can you explain more..... – Aviel Fedida Commented Aug 22, 2014 at 6:45
• @prabu try using file_get_content in place of fread – Veerendra Commented Aug 22, 2014 at 6:45
• where is your textbox in the code ? – TBI Commented Aug 22, 2014 at 6:52

7 Answers 7

Hope http://jsfiddle/o5xxz67f/ will help.

$(document).ready(function(){
    $('select').change(function(){
       alert($(this).val()); 
    });
});

You are inserting selected value from listbox to p tag, if you want to insert that inside of textbox, Use this code -

<input type="text" id="textboxid" value="" />

Now, in your js function -

function getSelectedValue(theValue){
   document.getElementById('pasteTheValue').innerHTML=theValue; // to insert in p tag
   document.getElementById('textboxid').value=theValue; // to insert inside of textbox
}

use a textbox with id like this

<input type="text" id="my_textbox" value="" />

Now change in your JS Function

function getSelectedValue(theValue){
 document.getElementById('pasteTheValue').innerHTML=theValue;
 document.getElementById('my_textbox').value=theValue; // add this line
}

UPDATE 2 :

 function getSelectedValue(theValue){
     document.getElementById('my_textbox').value=theValue; // add this line
    }

Consider Dropdown list element id as myDropDown. Now your task can be done as shown below:

$("#myDropDown").change(function(){
   var selectedValue = $(this).val();
   $("#pasteTheValue").val(selectedValue);
});

this jsbin should help you jsbin_example

<select id='selectList' onClick="showSelected(this)">
  <option>list1</option>
  <option>list2</option>
  <option>list3</option>
  <option>list4</option>

  </select>
  <input type="text" id='show' />

function showSelected(thisObj)
{

  document.getElementById('show').value = thisObj.options[thisObj.selectedIndex].text;

}

If you are ok using jquery it should be even more easier

try this

$(document).ready(function(){
    document.getElementByID('listID').on('change',function(){
        var list  = document.getElementByID('listID');
        var indx = list.selectedIndex;
        document.getElementByID('otherFieldID').val(list[indx].text);
    });
});

To get selected value you need to use .value in JavaScript and .val() in jQuery.

Using JavaScript

function getSelectedValue(theValue){
var SelectedValue = theValue.options[theValue.selectedIndex].value;
document.getElementById('pasteTheValue').innerHTML=SelectedValue ;
}

Using jQuery

$('select').change(function () {
var SelectedValue = $('select').val();
$('#pasteTheValue').innerHTML = SelectedValue;
}

Source: here is a plete tutorial on how to get selected value of dropdown list using javascript