小开

你需要获取选项的innerHTML，而不是它的值。

使用this.innerHTML代替this.selectedIndex。

编辑:首先需要获取option元素，然后使用innerHTML。> < /罢工

使用this.text代替this.selectedIndex。

小开

使用- - - - - -

$.trim($("select").children("option:selected").text())   //cat

这是小提琴- http://jsfiddle.net/eEGr3/

小开

HTML:

<select id="box1" onChange="myNewFunction(this);">

JavaScript:

function myNewFunction(element) {
var text = element.options[element.selectedIndex].text;
// ...
}

演示: http://jsfiddle.net/6dkun/1/

小开

纯JavaScript

var sel = document.getElementById("box1");
var text= sel.options[sel.selectedIndex].text;

jQuery:

$("#box1 option:selected").text();

小开

最佳答案

试着选择

function myNewFunction(sel) {
alert(sel.options[sel.selectedIndex].text);
}

<select id="box1" onChange="myNewFunction(this);">
<option value="98">dog</option>
<option value="7122">cat</option>
<option value="142">bird</option>
</select>

小开

试试下面的方法:

myNewFunction = function(id, index) {
var selection = document.getElementById(id);
alert(selection.options[index].innerHTML);
};

参见这里jsfiddle sample

小开

所有这些函数和随机的东西，我认为最好使用这个，像这样做:

this.options[this.selectedIndex].text

小开

 <select class="cS" onChange="fSel2(this.value);">
<option value="0">S?lectionner</option>
<option value="1">Un</option>
<option value="2" selected>Deux</option>
<option value="3">Trois</option>
</select>


<select id="iS1" onChange="fSel(options[this.selectedIndex].value);">
<option value="0">S?lectionner</option>
<option value="1">Un</option>
<option value="2" selected>Deux</option>
<option value="3">Trois</option>
</select><br>


<select id="iS2" onChange="fSel3(options[this.selectedIndex].text);">
<option value="0">S?lectionner</option>
<option value="1">Un</option>
<option value="2" selected>Deux</option>
<option value="3">Trois</option>
</select>


<select id="iS3" onChange="fSel3(options[this.selectedIndex].textContent);">
<option value="0">S?lectionner</option>
<option value="1">Un</option>
<option value="2" selected>Deux</option>
<option value="3">Trois</option>
</select>


<select id="iS4" onChange="fSel3(options[this.selectedIndex].label);">
<option value="0">S?lectionner</option>
<option value="1">Un</option>
<option value="2" selected>Deux</option>
<option value="3">Trois</option>
</select>


<select id="iS4" onChange="fSel3(options[this.selectedIndex].innerHTML);">
<option value="0">S?lectionner</option>
<option value="1">Un</option>
<option value="2" selected>Deux</option>
<option value="3">Trois</option>
</select>


<script type="text/javascript"> "use strict";
const s=document.querySelector(".cS");


// options[this.selectedIndex].value
let fSel = (sIdx) => console.log(sIdx,
s.options[sIdx].text, s.options[sIdx].textContent, s.options[sIdx].label);


let fSel2= (sIdx) => { // this.value
console.log(sIdx, s.options[sIdx].text,
s.options[sIdx].textContent, s.options[sIdx].label);
}


// options[this.selectedIndex].text
// options[this.selectedIndex].textContent
// options[this.selectedIndex].label
// options[this.selectedIndex].innerHTML
let fSel3= (sIdx) => {
console.log(sIdx);
}
</script> // fSel

但是:

 <script type="text/javascript"> "use strict";
const x=document.querySelector(".cS"),
o=x.options, i=x.selectedIndex;
console.log(o[i].value,
o[i].text , o[i].textContent , o[i].label , o[i].innerHTML);
</script> // .cS"

还有这个:

 <select id="iSel" size="3">
<option value="one">Un</option>
<option value="two">Deux</option>
<option value="three">Trois</option>
</select>




<script type="text/javascript"> "use strict";
const i=document.getElementById("iSel");
for(let k=0;k<i.length;k++) {
if(k == i.selectedIndex) console.log("Selected ".repeat(3));
console.log(`${Object.entries(i.options)[k][1].value}`+
` => ` +
`${Object.entries(i.options)[k][1].innerHTML}`);
console.log(Object.values(i.options)[k].value ,
" => ",
Object.values(i.options)[k].innerHTML);
console.log("=".repeat(25));
}
</script>

小开

据我所知，有两种解决办法。

两者都只需要使用普通的javascript

1 selectedOptions

现场演示

const log = console.log;
const areaSelect = document.querySelector(`[id="area"]`);


areaSelect.addEventListener(`change`, (e) => {
// log(`e.target`, e.target);
const select = e.target;
const value = select.value;
const desc = select.selectedOptions[0].text;
log(`option desc`, desc);
});

<div class="select-box clearfix">
<label for="area">Area</label>
<select id="area">
<option value="101">A1</option>
<option value="102">B2</option>
<option value="103">C3</option>
</select>
</div>

两个选择

现场演示

const log = console.log;
const areaSelect = document.querySelector(`[id="area"]`);


areaSelect.addEventListener(`change`, (e) => {
// log(`e.target`, e.target);
const select = e.target;
const value = select.value;
const desc = select.options[select.selectedIndex].text;
log(`option desc`, desc);
});

<div class="select-box clearfix">
<label for="area">Area</label>
<select id="area">
<option value="101">A1</option>
<option value="102">B2</option>
<option value="103">C3</option>
</select>
</div>

小开

使用普通JavaScript

onChange = { e => e.currentTarget.options[e.selectedIndex].text }

如果值在循环中，会给你精确的值。

小开

在React中使用Typescript:

  const handleSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (event) => {
const {  options, selectedIndex } = event.target;
const text = options[selectedIndex].text;
// Do something...
};

小开

你可以通过getSelected()方法获得一个包含所选项的类数组对象。是这样的:

querySelector('#box1').getSelected()

所以你可以用.textContent属性提取文本。是这样的:

querySelector('#box1').getSelected()[0].textContent

如果你有一个多重选择框，你可以循环数组类对象我希望它能帮助你😎👍

小开

使用jquery < p >。
在你的事件

  let selText = $("#box1 option:selected").text();
console.log(selText);

小开

function runCode() {
var value = document.querySelector('#Country').value;
window.alert(document.querySelector(`#Country option[value=${value}]`).innerText);
}

<select name="Country" id="Country">
<option value="IN">India</option>
<option value="GBR">United Kingdom </option>
<option value="USA">United States </option>
<option value="URY">Uruguay </option>
<option value="UZB">Uzbekistan </option>
</select>


<button onclick="runCode()">Run</button>

小开

var selectionlist = . getelementbyid(“代理”); td2。innerHTML = selectionlist.children[selectionlist.selectedIndex].innerHTML;

小开

ECMAScript 6 +

const select = document.querySelector("#box1");


const { text } = [...select.options].find((option) => option.selected);

使用JavaScript获取所选的选项文本

据我所知，有两种解决办法。

1 selectedOptions

两个选择