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>

Javascript从下拉列表中获取选项基于该值

4 个答案: