I'm just wondering if this is possible, supposed I have:

<select name = 'region' id = 'region'>
  <option value = '1'>Region 1</option>
<select>

Now, I know I get the value of 1 when I select "Region 1". Is there a way to get the "Region 1" as the value itself without changing the value = '1'. I need that for javascript for other dropdowns.

Sorry I forgot to mention, I'm referring to PHP. I know that:

$value = $_POST['region'];

will the value of 1, how can I get just the text to pass on $_POST?

I'm just wondering if this is possible, supposed I have:

<select name = 'region' id = 'region'>
  <option value = '1'>Region 1</option>
<select>

Now, I know I get the value of 1 when I select "Region 1". Is there a way to get the "Region 1" as the value itself without changing the value = '1'. I need that for javascript for other dropdowns.

Sorry I forgot to mention, I'm referring to PHP. I know that:

$value = $_POST['region'];

will the value of 1, how can I get just the text to pass on $_POST?

• javascript
• php
• html

• you want to do this in backend? – Drixson Oseña Commented Apr 25, 2014 at 8:49
• Check out this question: stackoverflow./questions/610336/… – Felix Commented Apr 25, 2014 at 8:51
• Or this one stackoverflow./questions/11926906/… – Pwner Commented Apr 25, 2014 at 8:52
• I forgot to mention, in php? – Yassi Commented Apr 25, 2014 at 8:56
• In php? how about this. stackoverflow./questions/11926906/… – kjames Commented Apr 25, 2014 at 9:01

9 Answers 9

var el = document.getElementById('region');
var text = el.selectedIndex == -1 ? null : el.options[el.selectedIndex].text;
console.log(text);

Javascript:

var value1 = document.getElementById("region");
var value2 = value1.options[value1.selectedIndex].text;
alert(value2);

js

$("#region").change(function(){
  var domNode = document.getElementById("region");
  var value = domNode.selectedIndex;
  var selected_text = domNode.options[value].text;
  alert(selected_text);
});

First of all, as you haven't mentioned whether you are planning on supporting legacy browsers or not, I've decided to add support for that browsers as well. My script works with all IE versions (IE7 inclusive).

So, first we attach our eventlistener to your select element. Then we retrieve the text of the selected option and return the value;

Have a look at this => DEMO

If you want to submit it via $_POST than do the following ->

1. Create a hidden input element, set its name attribute to say select, then set its value to the value of our text variable (we will have that variable when one of our options is selected) - See the code below.
2. After submitting your form you can retrieve the value like so => $_POST['select'] (select is the name attribute we have assigned to our hidden input element)

Javascript

//attaching the eventlistener (modified the code to make it patible with older IE versions)

function attach(element,listener,ev,tf){

    if(element.attachEvent) {

        //support for older IE (IE7 inclusive)
        element.attachEvent("on"+listener,ev);

        }else{

        //modern browsers
        element.addEventListener(listener,ev,tf);

        }

    }

function returnTextofTheSelectedElement(sel){

    //getting and returning the text of the selected option
    selectedIndex = sel[sel.selectedIndex];
    return text = selectedIndex.innerText ? selectedIndex.innerText : selectedIndex.textContent;

    }

var select = document.getElementById('region');

attach(select,'change',function(){

    //pass the select tag you want to get the text of
    //*returnTextofTheSelectedElement* function returns our text
    alert(returnTextofTheSelectedElement(select));

    //so you can store it in a *variable* and use it when submitting your form
    text = returnTextofTheSelectedElement(select);

    //if you want to submit it via $_POST than do the following
    //create a hidden *input* element, set its name attribute to say *select*, then set its value to the value of our *text* variable

    input = document.createElement('input');
    input.type = 'hidden';
    input.name = 'select';
    input.value = text;

    select.parentNode.appendChild(input);

    alert('The value/text of the hidden input is '+input.value);

    //when submitting the form, it will also submit out hidden input with the value (text) of the selected option
    //you can retrieve the value like so => *$_POST['select']* 


},false);

HTML

<select name='region' id='region'>

    <option value='1'>Region 1</option>
    <option value='2'>Region 2</option>
    <option value='3'>Region 3</option>

<select>

Cross Browser:

var select = document.getElementById('region');
if(select.addEventListener) {
    select.addEventListener('change', function(evt) {     
        var target = evt.target || evt.srcElement;
        var selected = target[target.selectedIndex];
        var text = selected.textContent || selected.innerText;
        alert(text);
    });
 }
else if(select.attachEvent) {
  select.attachEvent('onchange', function(evt) {
        var target = evt.target || evt.srcElement;
        var selected = target[target.selectedIndex];
        var text = selected.textContent || selected.innerText;
        alert(text);
    });
}

http://jsfiddle/LrETq/

$(select#region option).click(function(){

          var textOfTheSelectedOption= $(this).text();
          alert( textOfTheSelectedOption);

});

You can get text value like this. Is it helpful?

var e = document.getElementById("region");
var value = e.options[e.selectedIndex].text;
console.log(value);

<script>

    function getSelectedText(){
   var theSelect= document.getElementById("region");
var theText= theSelect.options[theSelect.selectedIndex].text;
alert(theText);

}
</script>
<select name = 'region' id = 'region'  onchange="getSelectedText()">
  <option value = '1'>Region 1</option>
  <option value = '2'>Region 2</option>

<select>

<form method="post" action="action.php">
<select name = 'region' id = 'region'  onchange="fnc()">
  <option value = '1'>Region 1</option>
  <option value = '2'>Region 2</option>
<select>
<input type="hidden" name="hidden_region" id="hidden_region">
<input type="submit" value="Send">
</form>
<script type="text/javascript">
function fnc(){
var el = document.getElementById('region');
var text = el.selectedIndex == -1 ? '' : el.options[el.selectedIndex].text;
document.getElementById('hidden_region').value = text;
}
</script>

in php post will be like

$value = $_POST['hidden_region'];