从下拉框中获取文本

时间:2008-08-08 13:36:17

标签: javascript dom browser client-scripting

这将获取我在下拉菜单中选择的任何内容的值。

document.getElementById('newSkill').value

但是,我无法找到下拉菜单当前显示的文本所需的属性。我尝试了“文字”,然后看了W3Schools但是没有答案,这里有人知道吗?

对于那些不确定的人,这是下拉框的HTML。

<select name="newSkill" id="newSkill">
    <option value="1">A skill</option>
    <option value="2">Another skill</option>
    <option value="3">Yet another skill</option>
</select>

13 个答案:

答案 0 :(得分:119)

根据您的示例HTML代码,这是获取当前所选选项的显示文本的一种方法:

var skillsSelect = document.getElementById("newSkill");
var selectedText = skillsSelect.options[skillsSelect.selectedIndex].text;

答案 1 :(得分:8)

这应该返回所选值的文本值

var vSkill = document.getElementById('newSkill');

var vSkillText = vSkill.options[vSkill.selectedIndex].innerHTML;

alert(vSkillText);

道具:@Tanerax阅读问题,了解所询问的内容并在其他人知道之前回答。

编辑:DownModed,因为我实际上已经完整地阅读了一个问题并回答了它,这是一个悲伤的世界。

答案 2 :(得分:8)

简单地说,您可以使用Jquery而不是Javascript

var SalesApp = angular.module('SalesApp', ['ui.router', 'ngMaterial']);
  SalesApp.config(function($stateProvider, $urlRouterProvider) {
  var oneState = {
  name: 'one',
  url: '/one',
  template: 'one.html'
  }

  var twoState = {
  name: 'two',
  url: '/two',
  template: 'two.html'
  }
  var threeState = {
  name: 'three',
  url: '/three',
  template: 'three.html'
  }

  $stateProvider.state(oneState);
  $stateProvider.state(twoState);
  $stateProvider.state(threeState);

});
SalesApp.controller('AppCtrl', function ($scope, $timeout, $mdSidenav) {
  $scope.toggleLeft = buildToggler('left');
  $scope.toggleRight = buildToggler('right');

 function buildToggler(componentId) {
  return function() {
     $mdSidenav(componentId).toggle();
   };
 }
});

试试这个。

答案 3 :(得分:7)

document.getElementById('newSkill').options[document.getElementById('newSkill').selectedIndex].value 

应该工作

答案 4 :(得分:4)

这项工作我尝试了我自己,我想我发布在这里以防有人需要它...

document.getElementById("newSkill").options[document.getElementById('newSkill').selectedIndex].text;

答案 5 :(得分:2)

将一个更改事件附加到选择中,该事件获取每个所选选项的文本并将其写入div。

你可以使用jQuery,它非常成功且易于使用

<select name="sweets" multiple="multiple">
  <option>Chocolate</option>
  <option>Candy</option>
  <option>Taffy</option>
  <option selected="selected">Caramel</option>
  <option>Fudge</option>
  <option>Cookie</option>
</select>
<div></div>


$("select").change(function () {
  var str = "";

  $("select option:selected").each(function() {
    str += $( this ).text() + " ";
  });

  $( "div" ).text( str );
}).change();

答案 6 :(得分:1)

这是否得到了正确的答案?

document.getElementById("newSkill").innerHTML

答案 7 :(得分:1)

function getValue(obj)
{  
   // it will return the selected text
   // obj variable will contain the object of check box
   var text = obj.options[obj.selectedIndex].innerHTML ; 

}

HTML代码段

 <asp:DropDownList ID="ddl" runat="server" CssClass="ComboXXX" 
  onchange="getValue(this)">
</asp:DropDownList>

答案 8 :(得分:0)

    var ele = document.getElementById('newSkill')
    ele.onchange = function(){
            var length = ele.children.length
            for(var i=0; i<length;i++){
                if(ele.children[i].selected){alert(ele.children[i].text)};              
            }
    }   

答案 9 :(得分:0)

var selectoption = document.getElementById("dropdown");
var optionText = selectoption.options[selectoption.selectedIndex].text;

答案 10 :(得分:0)

请尝试下面这是最简单的方法,它完美无缺

var newSkill_Text = document.getElementById("newSkill")[document.getElementById("newSkill").selectedIndex];

答案 11 :(得分:0)

这是一种简便快捷的方法

document.getElementById('elementID').selectedOptions[0].innerHTML

答案 12 :(得分:0)

发现这是一个棘手的问题,但使用这里的想法我最终得到了使用 PHP 和 Mysqli 填充列表的解决方案:然后使用一些 javascript 来获取工作变量。

        <select  id="mfrbtn" onchange="changemfr()" >   
        <option selected="selected">Choose one</option>
            <?php
            foreach($rows as $row)
                {
                echo '<option   value=implode($rows)>'.$row["Mfrname"].'</option>';
                 }
              ?>
          </select>

然后:

<script language="JavaScript">
    
    function changemfr()
    {
     var $mfr2=document.getElementById("mfrbtn").selectedOptions[0].text;
     alert($mfr2);
    }
</script>