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>

我可以获取所选选项的值，但是我需要option元素，以便可以更新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> 

Answer 2

在这里，将被选中。

为演示添加了文本更改。

注意：我删除了onChange中的__doPostBack，因为它不存在于代码段中。

 function CheckValueSelected() { let sel = document.querySelector('#DropDownOutfall'); let opt = sel.options[sel.selectedIndex]; opt.text += 'Test Change'; console.log(opt); } 

 <select name="ctl00$MainContent$DropDownOutfall" onchange="CheckValueSelected();" 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> 

添加这一项是因为Louys是正确的，所以CSS选择器可以使您直接进入元素。

好路易！ 。

 function CheckValueSelected() { document.querySelector('#DropDownOutfall option:checked').text += ' - test'; } 

 <select name="ctl00$MainContent$DropDownOutfall" onchange="CheckValueSelected();" 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> 

Answer 3

$('#DropDownOutfall').change(function() {
    var selectedValue = $('#DropDownOutfall').val();
    var selectedOption = $('#DropDownOutfall option[value="' + selectedValue + '"]');
    selectedOption.val("option value");//Changes actual value
    selectedOption.html("option value");//Changes value text
});

Answer 4

这是香草JS中的一种方法

 CheckValueSelected = () => { const selVal = document.getElementById('DropDownOutfall'); console.log(selVal.querySelector(`[value="${selVal.value}"]`)); } 

 <select onchange="CheckValueSelected()" id="DropDownOutfall" class="form-control" style=""> <option selected="selected" value="-1">- Select an option -</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> 

编辑1：

更动态的方法，它使用最少的选择器。

编辑2：

使用数据属性data-current-selection=""添加/删除innerText选择并跟踪先前状态的更完整示例。

 CheckValueSelected = _this => { const { currentSelection } = _this.dataset; if (currentSelection !== '') { _this.querySelector(`[value="${currentSelection}"]`).innerText = currentSelection; } const target = _this.querySelector('option:checked'); _this.dataset.currentSelection = target.value; target.innerText += ' selected'; } 

 <select onchange="CheckValueSelected(this)" data-current-selection="" id="DropDownOutfall" class="form-control"> <option selected="selected" value="-1">- Select an option -</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>