CODEWITHSUNDEEP
javascriptphphtml
Yassi
Yassi

Reputation: 2539

Dropdown Select Getting Text Value instead of the assined value

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?

Upvotes: 3

Views: 1726

Answers (9)

Ryan
Ryan

Reputation: 14659

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.net/LrETq/

Upvotes: 1

W.D.
W.D.

Reputation: 1041

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 compatible 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>

Upvotes: 1

user3572803
user3572803

Reputation: 31

js

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

Upvotes: 1

Marin Vartan
Marin Vartan

Reputation: 582

<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'];

Upvotes: 0

Tuhin
Tuhin

Reputation: 3373

<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>

Upvotes: 0

anik4e
anik4e

Reputation: 493

Javascript:

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

Upvotes: 1

Sardor I.
Sardor I.

Reputation: 426

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);

Upvotes: 0

Marin Vartan
Marin Vartan

Reputation: 582

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

Upvotes: 1

Tuhin
Tuhin

Reputation: 3373

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

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

});

Upvotes: 0

Related Questions