下拉选择获取文本值而不是关联值

Question

我只是想知道这是否可能，假设我有：

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

现在，我知道当我选择“区域 1”时我得到的值是 1。有没有办法得到 将“区域 1”作为值本身而不更改值 = '1'。我需要其他下拉菜单的 javascript。

对不起，我忘了提，我指的是 PHP。我知道：

$value = $_POST['region'];

将值 1，我怎样才能只获得要传递给 $_POST 的文本？

Answer 1

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

Answer 2

Javascript：

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

Answer 3

js

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

Answer 4

首先，由于您没有提到您是否计划支持旧版浏览器，因此我决定也添加对这些浏览器的支持。我的脚本适用于所有 IE 版本（包括 IE7）。

所以，首先我们将eventlistener 附加到您的select 元素。然后我们检索选中选项的文本并返回值；

看看这个 => DEMO

如果您想通过$_POST 提交，请执行以下操作 ->

1. 创建一个hidden input 元素，将其名称属性设置为select，然后将其值设置为text 变量的值（当我们选择其中一个选项时，我们将拥有该变量） - 请参阅下面的代码。
2. 提交表单后，您可以像这样检索值 => $_POST['select']（select 是我们分配给hidden input 元素的name attribute）

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>

Answer 5

跨浏览器：

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/

Answer 6

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

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

});

Answer 7

您可以像这样获取文本值。有用吗？

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

Answer 8

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

Answer 9

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

在 php 帖子中会像

$value = $_POST['hidden_region'];