Question

我当前有一个标签，显示动态选择下拉列表中的选定选项，但它只显示onchange。我希望能够在页面加载时显示当前值。我尝试过切换＆＃39;更改＆＃39;为了加载＆＃39;没有运气。这是我目前的设置：＆＃13; ＆＃13; Array.prototype.forEach.call（document.getElementsByName（＆＃39; filename＆＃39;），function（elem）{＆＃13; elem.addEventListener（＆＃39;更改＆＃39;，function（）{＆＃13; document.getElementById（＆＃39; mylabel＆＃39;）。innerHTML = this.value;＆＃13; }）;＆＃13; }）;＆＃13; ＆lt; select class =＆＃34; select1＆＃34;命名=＆＃34;文件名＆＃34; ID =＆＃34;文件名＆＃34;＆GT;＆＃13; ＆LT;选项＆GT; FOO＆LT; /选项＆GT;＆＃13; ＆LT;选项＆GT;巴≤; /选项＆GT;＆＃13; ＆LT; /选择＆GT;＆＃13; ＆lt; label id =＆＃34; mylabel＆＃34;＆gt;＆lt; / label＆gt;＆＃13; ＆＃13; ＆＃13;

Answer 1

你确实说过页面加载的时候，它就像这样简单......

<body onload="mylabel.innerHTML=filename.value;">

Answer 2

我希望这是你想要的，我只是在功能之外添加了一行

Array.prototype.forEach.call(document.getElementsByName('filename'), function(elem) {
  elem.addEventListener('change', function() {
    document.getElementById('mylabel').innerHTML = this.value;
  });
});
document.getElementById('mylabel').innerHTML = document.getElementById('filename').value;

<select class="select1" name="filename" id="filename">
  <option>foo</option>
  <option>bar</option>
</select>
<label id="mylabel"></label>

Answer 3

＆＃13;

Array.prototype.forEach.call(document.getElementsByName('filename'), function(elem) {
  elem.addEventListener('change', function() {
    document.getElementById('mylabel').innerHTML = this.value;
  });
});

$('#mylabel').html($('#filename').val());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select class="select1" name="filename" id="filename">
  <option>foo</option>
  <option>bar</option>
</select>
<label id="mylabel"></label>

＆＃13;

Answer 4

为什么要循环？

＆＃13;

let e = document.getElementById("filename");
let x = document.getElementById('mylabel');

document.addEventListener('DOMContentLoaded',function(){
   x.innerHTML = e.value;    
   e.addEventListener('change', function(){
      x.innerHTML = this.value;
   });
});

＆＃13;

<select class="select1" name="filename" id="filename">
  <option>foo</option>
  <option>bar</option>
</select>
<label id="mylabel"></label>

＆＃13;

Answer 5

应用DRY（不要自己重复）：命名单击处理程序，然后在初始化期间手动调用它。或者，您也可以在初始化期间手动触发更改。

码

$(function() {
  // event handler on change
  $('#filename').change(mylabel_update);

  // update mylabel to show filename
  function mylabel_update() {
    $('#mylabel').html($('#filename').value);
  } 

  // initialize option A - call the function directly
  mylabel_update();

  // initialize option B - force the change event (don't need the named fn)
  $('#filename').trigger('change');
});

如何在没有更改函数

5 个答案: