Question

在选择选项更改事件中，为什么我们不能使用this或event.target获取选定的值而不是编写像$( "select option:selected" )这样的笨拙代码来获取所选值？

Answer 1

＆＃13;

$("select").on('change', function(){
  console.log($(this).val());
  console.log($(this).find('option:selected').attr('data-attribute')); 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select>
  <option data-attribute="a">1</option>
  <option data-attribute="b">2</option>
  <option data-attribute="c">3</option>
  <option data-attribute="d">4</option>
</select>

＆＃13;

Answer 2

您无法获取所选值，但当然可以获取元素和event.target。

<select onchange="mySelectOnchange(this, event)"></select>

function mySelectOnchange(elm, e) {
   // **
}

Answer 3

从所选选项自动传输到<select>元素本身的唯一属性是值，因为这是从下拉菜单中选择选项的主要目的。其他属性（如data-*）不会自动复制，因为<select>可能有自己的属性，例如

<select id="x" data-name="select">
    <option value="1" data-name="option1">1</option>
    <option value="2" data-name="option2">2</option>
</select>

$("#x").data("name")返回所选选项的名称而不是<select>的名称是没有意义的。

Answer 4

纯JavaScript

如果您要使用纯JavaScript方法，请使用event.target。要引用MDN官方文档...

“事件”接口的target属性是对将事件调度到的对象的引用。（来源：MDN Web Docs: Event.target。）

由于为我们提供了选定的元素，因此我们只需要value属性，而获得文本显示只不过是event.target[event.target.selectedIndex].text ...

function getSelectedValue(event) {
   console.log("Value: " + event.target.value + "; Display: " + event.target[event.target.selectedIndex].text + ".");
}

<select onchange="getSelectedValue(event)">
    <option selected disabled>--Pick an Option--</option>
    <option value="blue1">Blueberry</option>
    <option value="rasp2">Raspberry</option>
    <option value="straw3">Strawberry</option>
</select>

使用上述方法，将其更新为添加选择选项值的其他属性（全部使用纯JavaScript）非常简单。

jQuery

如果您要使用jQuery方法，请尝试使用:selected查询字词...

$("#selector").on('change', function(){
    console.log("Value: " + $(this).val() + "; Display: " + $(this).find('option:selected').text() + ".");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selector">
        <option selected disabled>--Pick an Option--</option>
        <option value="blue1">Blueberry</option>
        <option value="rasp2">Raspberry</option>
        <option value="straw3">Strawberry</option>
    </select>

Answer 5

它存在...看一下这段代码

var selectElem = document.getElementById('select');

selectElem.addEventListener('change', onSelect_change);

function onSelect_change(domEvent){
	// get the selected value :
	var selectedValue = domEvent.target[domEvent.target.selectedIndex].value;
  // you can also do it using domEvent.target.value but the other solution allows you to get every option's property you want 
	
	console.log("Selected: " + selectedValue);
}

<select id="select" name="select">
  <option value="value1">Value 1</option> 
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>

希望它有所帮助;）

PS：如果你想要更多例子，请查看http://www.w3schools.com/jsref/prop_select_selectedindex.asp

Answer 6

<select onchange="getSelectedValue(this)"></select>
...
function getSelectedValue(select) {
   console.log(select.value)
}

为什么选择选项更改事件不能有这个和event.target来获取选定的值？

6 个答案:

纯JavaScript

jQuery