Question

是否可以在select中获取所选文本而不是其值？

<select id="animals">
   <option value="mammals">Elephant</option>
   <option value="reptile">Snakes</option>
   <option value="mammals">Bear</option>
   <option value="birds">Ostrich</option>
</select>

我想知道被选中的动物类型。

感谢您的帮助。

Answer 1

function getSelectedText(elementId) {
    var elt = document.getElementById(elementId);

    if (elt.selectedIndex == -1)
        return null;

    return elt.options[elt.selectedIndex].text;
}

var text = getSelectedText('animals');

Answer 2

使用Document.querySelector()，返回文档中与指定的选择器组匹配的第一个元素。

console.log(document.querySelector('#animals option:checked').textContent);

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<select id="animals">
  <option value="mammals">Elephant</option>
  <option value="reptile">Snakes</option>
  <option value="mammals">Bear</option>
  <option value="birds">Ostrich</option>
</select>

Fiddle

Answer 3

可以使用javascript selectedIndex和text方法完成。

＆＃13;

<!DOCTYPE html>
<html>

<body>

  <p>Choose an option in the drop-down list and display that option.</p>

  <form>
    <select id="mySelect" onchange="myFunction()">
      <option value="mammals">Elephant</option>
      <option value="reptile">Snakes</option>
      <option value="mammals">Bear</option>
      <option value="birds">Ostrich</option>
    </select>
  </form>

  <p id="demo"></p>

  <script>
    function myFunction() {
      var x = document.getElementById("mySelect");
      var i = x.selectedIndex;
      document.getElementById("demo").innerHTML = x.options[i].text;
    }
  </script>

</body>

</html>

＆＃13;

Answer 4

我有一个类似的问题，我想将选定的文本（不是值）输出到Textarea框中。我是这样解决的：

     <label>Objectives :</label>
<select name="objectives" class="objectives" onchange="getObjectives(this);">
<option selected="selected">--Select Objectives--</option>
<option selected="selected">--One--</option>
<option selected="selected">--Two--</option>
</select>

<textarea rows="4" cols="30" id="objid"></textarea>

<script>
function getObjectives(sel) {
// Select option returns text instead of value of option
document.getElementById ("animals").value = sel.options[sel.selectedIndex].text;

}

   </script>

Answer 5

jQuery的：

this.options[this.selectedIndex].innerText

使用纯Javascript：

    app.get('/markers', function(req, res){
    var query = Marker.find({});
    query.exec(function(err, markers){
        if(err)
            res.send(err);
        res.json(markers);

试试这个

javascript获取所选文本而不是值

5 个答案: