Question

如何通过JavaScript从下拉菜单中更改选择项

 <div id="preformatted">

 </div>

 <div class="number-entry-pane">
 <label>Enter a digit:
 <input type="number" id="numInput" min=0 max=9 /></label>

  // Save references to my two control elements.
  var myPre = document.getElementById("preformatted");
  var numInput = document.getElementById("numInput");

  // Create an array of the numbers 0 through 9 as 7 segment digits.
  var numberStrings = [
   " __ <br/>|  |<br/>|__|<br/> ",
   "    <br/>   |<br/>   |<br/>",
   " __ <br/> __|<br/>|__ <br/>",
   " __ <br/> __|<br/> __|<br/>",
   "    <br/>|__|<br/>   |<br/>",
   " __ <br/>|__ <br/> __|<br/>",
   " __ <br/>|__ <br/>|__|<br/>",
   " __ <br/>   |<br/>   |<br/>",
   " __ <br/>|__|<br/>|__|<br/>",
   " __ <br/>|__|<br/> __|<br/>"];

  console.log(numberStrings)
  // Attach the listeners for the input changes.
  numInput.addEventListener("keyup", changeNumbers);
  numInput.addEventListener("change", changeNumbers);

  function changeNumbers(){
    // Simply use the element from the array associated with
    //  the entered number to update the preformatted display.
    myPre.innerHTML = numberStrings[numInput.value];
  }

我尝试通过以下方式更改下拉菜单的值：

<select name="example_length" aria-controls="example" class="">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>

但数字仅在HTML中改变，但内容未更改;

链接到示例Table Sorting

Answer 1

我找到了答案

通过纯JavaScript

document.getElementsByName("example_length")[0].value = 50;
var event = new Event('change');
document.getElementsByName("example_length")[0].dispatchEvent(event);

jQuery

$( "select[name='example_length']" ).val(50).change();

JavaScript - 如何从下拉菜单中更改项目

1 个答案: