简体   繁体   English

jQuery选择框在特定页面上的更改

[英]jquery select box change on a specific page

I think this should be really easy, but I can't seem to find an answer. 我认为这应该很容易,但是我似乎找不到答案。

I'm using rails 4 and jquery to identify when one of multiple select boxes is altered on a page, and if so, perform some action. 我正在使用Rails 4和jquery来识别何时在页面上更改了多个选择框之一,如果是,请执行一些操作。

This is the relevant code in my application.js file: 这是我的application.js文件中的相关代码:

$('body').on('change', 'select',function(){
      *action*
});

The issue I'm having is that this code will pick up a select box change on any page within my application. 我遇到的问题是此代码将在应用程序内的任何页面上拾取选择框更改。 How do I set things up so that it will only pick up select box changes on a specific page? 如何设置内容,使其仅在特定页面上显示选择框的更改?

Do I do this by creating a new .js file which is specific to my view? 是否通过创建特定于我的视图的新.js文件来做到这一点? If so, how do the file naming conventions work? 如果是这样,文件命名约定如何工作?

there are several ways to do this, but the cleanest seems to be this : add a class to the select you wish to be handled by this function. 有几种方法可以做到这一点,但最干净的方法似乎是:在要使用此函数处理的选择中添加一个类。 Let's call this class handlethis . 我们将此类handlethis The change your jQuery selector accordingly. 相应地更改您的jQuery选择器。

You HTML would look like : 您的HTML看起来像:

<select name="myselect" id="myselect" class="handlethis">
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    ...
</select>

and the JS : 和JS:

$('body').on('change', 'select.handlethis',function(){
  *action*
});

I have an example for you to understand this.I hope it will be helpful to you. 我有一个例子供您理解。希望对您有所帮助。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
    <script type="text/javascript">
    $(function(){
        $('select').change(function(){ // when one changes
            $('select').val( $(this).val() ) // they all change
        })
    })
    </script>
    <style type="text/css">

    </style>
    <title>HELLO</title>
</head>
<body>
(top of the page)
<select>
  <option value="big1">1big1</option>
  <option value="big2">2big2</option>
</select>
   other content here...
   (bottom of the page)
<select>
  <option value="big1">big1</option>
  <option value="big2">big2</option>
</select>
</body>
</html>

If it is helpful to you then please vote it up. 如果对您有帮助,请投票。

提供选择框的ID,并将该ID用于呼叫功能

To pick only the select you want, just add an id or a class to the select, your code should look like this : 要仅选择所需的选择,只需向选择添加一个ID或一个类,您的代码应如下所示:

HTML : HTML:

<select id="selector" name="selector">
    ...
</select>

JS : JS:

$('#selector').change(function() {
    *action*
});

The change() function is just a shortcut for on('change'). change()函数只是on('change')的快捷方式。

You can add a new JS file specific to your view, for best practice about it, read this post : 您可以添加特定于您的视图的新JS文件,有关此方法的最佳实践,请阅读以下文章:

Best way to add page specific javascript in a Rails 3 app? 在Rails 3应用程序中添加页面特定javascript的最佳方法?

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM