Javascript 根据值从下拉列表中获取选项

Question

如何根据所选值获取下拉列表中的选项？本质上我想获取所选的选项，然后更改innerHTML。

这是我到目前为止所拥有的..

<select name="ctl00$MainContent$DropDownOutfall" onchange="CheckValueSelected();setTimeout('__doPostBack(\'ctl00$MainContent$DropDownOutfall\',\'\')', 0)" id="DropDownOutfall" class="form-control" style="">
    <option selected="selected" value="-1"></option>
    <option value="OUTFALL 001">OUTFALL 001</option>
    <option value="OUTFALL 002">OUTFALL 002</option>
    <option value="OUTFALL 004">OUTFALL 004</option>
    <option value="OUTFALL 005">OUTFALL 005</option>
</select>

我能够获取所选选项的值，但我需要选项元素，以便更新innerHTML。

$('[id*=DropDownOutfall]').val()

Answer 1

首先，只需使用 id :$('#DropDownOutfall')查找 <select>元素。

然后，要获取所选选项，请使用 .find()并申请.html() (或 .text() )就可以了。

$('#DropDownOutfall').on('change',function(){
  $(this).find('option:selected').html('Hello world');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="ctl00$MainContent$DropDownOutfall" id="DropDownOutfall" class="form-control" style="">
    <option selected="selected" value="-1"></option>
    <option value="OUTFALL 001">OUTFALL 001</option>
    <option value="OUTFALL 002">OUTFALL 002</option>
    <option value="OUTFALL 004">OUTFALL 004</option>
    <option value="OUTFALL 005">OUTFALL 005</option>
</select>