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

发布于 2024-11-06 09:52:58 字数 812 浏览 1 评论 0原文

我不是 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 中的等价物是什么？

谢谢

原文

I'm not a JS expert but i think what i'm trying to do is pretty simple (at least in jQuery)

I've got 3 select

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

and an input (it's a tinyMCE one in advlink plugin)

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

I want that each time i change a value in one of the 3 select, that this value of the option, will be placed in the input.

In Jquery, it would be something like :

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

But i can't use it. So what is the equivalent in plain Javascript ?

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

时光磨忆 2024-11-13 09:52:58

我建议你继续使用 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>

I would advice you keep using Jquery as it speeds up this kind of thing but in pure JavaScript i think what you want looks something like this...

 <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>

回复收藏 0 原文

私藏温柔 2024-11-13 09:52:58

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

尽管我不确定它是否有效，因为 getElementsByClassName 返回超过 1 个元素。

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

Though I am not sure exactly if it'll work since getElementsByClassName returns more than 1 element.

回复收藏 0 原文

合约呢 2024-11-13 09:52:58

试试这个：

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

Try this:

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

回复收藏 0 原文

司马昭之心 2024-11-13 09:52:58

好吧，所以我意识到这个帖子已经有 8 年多了，所以这个答案对于 OP 来说并不是那么重要（他们可能很久以前就想到了），而是对于其他可能对这个特定主题感到好奇的人来说。

话虽如此，这里有一个相对简单且可靠的方法，您可以在普通 JS 中实现它：

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

const targetLink = document.getElementById('href'); 

    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')) {

                targetLink.textContent = e.target.value;

            }

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

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

                targetLink.textContent = e.target.value;

            }
        
        }   

    });

Okay, so I realize this thread is well over 8 years old, so this answer isn't so much for the OP (who probably figured it out long ago) as it is for someone else who might be curious about this particular topic.

All that said, here's a relatively simple and reliable way you could pull it off in vanilla JS:

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

const targetLink = document.getElementById('href'); 

    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')) {

                targetLink.textContent = e.target.value;

            }

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

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

                targetLink.textContent = e.target.value;

            }
        
        }   

    });

回复收藏 0 原文

~没有更多了~