Question

我不是JS专家，但我认为我想做的事情非常简单（至少在jQuery中）

我有3个选择

  <select id="faq" class="onchance_fill">...</select>
  <select id="pages" class="onchance_fill">...</select>
  <select id="faq" class="onchance_fill">...</select>

和一个输入（它是advlink插件中的一个tinyMCE）

<input type="text" onchange="selectByValue(this.form,'linklisthref',this.value);" value="" class="mceFocus" name="href" id="href" style="width: 260px;">

我希望每当我更改3选项之一的值时，该选项的值将被放入输入中。

在Jquery中，它将类似于：

$('.ajax_onchance_fill').change(function() {
        data = $('.ajax_onchance_fill').val();
        $('#href').text(data);
    });

但我无法使用它。那么普通Javascript中的等价物是什么？

由于

Answer 1

document.getElementsByClassName("ajax_onchance_fill").onchange = function() { 
   getElementById('href').value = this.options[this.selectedIndex].text;
};

虽然我不确定它是否会起作用，因为getElementsByClassName会返回超过1个元素。

Answer 2

试试这个：

$('.ajax_onchance_fill').change(function() {
        var data = $(this).val();
        $('#mytextboxid').val(data);
    });

Answer 3

我会建议你继续使用Jquery，因为它加速了这种事情，但在纯JavaScript中我认为你想要的东西看起来像这样......

 <script type="text/javascript">
  function load() {
  var elements = document.getElementsByClassName('onchance_fill');
  for(e in elements){
      elements[e].onchange = function(){
          document.getElementById('href').value = this.value;
     }       
  }
  }
</script>

Answer 4

好吧，所以我意识到这个线程已经使用了8年以上，所以对于OP（可能很久以前就已经知道了）的答案不是那么多，而是对于可能对此好奇的其他人而言主题。

所有这些，这是在香草JS中将其提取的相对简单和可靠的方法：

/**
 * Since we need to listen to all three ajax_onchance_fill elements,
 * we'll use event delegation.
 * 
 */

    document.addEventListener('change', function(e) {

        if (!!Element.prototype.matches) { // Let's make sure that matches method is supported...

            if (e.target.matches('.ajax_onchance_fill')) {

                e.target.textContent = ajaxOnchanceFill.value;

            }

        } else { // and if not, we'll just use classList.contains...

            if (e.target.classList.contains('ajax_onchance_fill')) {

                e.target.textContent = ajaxOnchanceFill.value;

            }

        }   

    });

如何将.change函数从jQuery迁移到普通Javascript

4 个答案: