关于更改 jquery 功能的问题答案

【问题标题】：Issue on change jquery function关于更改 jquery 功能的问题
【发布时间】：2015-03-28 15:06:56
【问题描述】：

我面临着非常奇怪的问题。我有一个下拉选项

<table class="variations">
   <tr>
      <td>
          <select name="up_options">
             <option value="" selected>Select Value</option>
             <option value="a">A</option>
             <option value="b">B</option>
             <option value="c">C</option>
             <option value="d">D</option>
             <option value="e">E</option>
          </select>
      </td>
   </tr>
</table>

并创建一个 jquery 函数来提醒我选择的值，但它不起作用。

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('.variations select').change(function(){
           alert(jQuery('.single_variation').text());
        });
    });
</script>

但是，当我将change 编辑为click 时，它可以完美运行（完全意味着它仅在单击时起作用），当我单击选择时它会给我警报...但是当我再次将其更改为change 它时不工作。

我也试试这个

<script type="text/javascript">
    jQuery(document).ready(function(e) {
        jQuery('.variations select').on('change', function(){
           alert(jQuery('.single_variation').text());
        });
    });
</script>

但它也不起作用。

请帮帮我，我对此很困惑

【问题讨论】：

这里没有不应该工作的东西。您能否在jsfiddle.net 中提供该问题的工作示例。
什么是.single_variation？
在这里找到你的答案stackoverflow.com/questions/11179406/…
为选择本身添加一个标识符并将 onchange 绑定到它工作正常。无法解释为什么
@HuzoorBux OP 想要获取不同元素的值，而不是选择，除此之外它们应该可以正常工作。

标签： jquery wordpress onchange

【解决方案1】：

原始代码没有“错误”，但您可以进行以下改进：

   // Shortcut for DOM ready with locally scoped $
   jQuery(function($) {

        // Delegated event handler attached to a common ancestor
        $('.variations').on('change','select',function(){

            // this is the select itself, so use its val()
           var currentSelectVal = $(this).val();

           // Do something with the selection
           $('.single_variation').text(currentSelectVal);
        });
    });

JSFiddle： http://jsfiddle.net/TrueBlueAussie/z9ev6rrp/2/

注意： 我期待看到页面的其余部分和代码，以确定您的实际问题出在哪里:)

【讨论】：

thanx 很多兄弟，你救了我的命和我的一天.....我对你的代码进行了一些更改，它的工作完美

【解决方案2】：

试试这个

 jQuery('select[name="up_options"]').change(function(){
      jQuery('.single_variation').text( $(this).val());
      alert(jQuery('.single_variation').text());
  });

【讨论】：

这应该没什么区别（除了减慢选择器的速度）。原始代码应该可以工作。
另请注意：您在中途切换到使用$。您必须与 jQuery 的 OPs 使用保持一致。

【解决方案3】：

jQuery(document).ready(function() {
        jQuery('.variations select').change(function(){
        $(".single_variation").text((jQuery('.variations select option:selected').text()));    
        });
    });

或

$(".single_variation").text($(this).val().toUpperCase());

Demo

【讨论】：

@TrueBlueAussie 我检查了它会返回整个文本
对不起，我的意思是：jQuery(this).val() 有什么问题 :)

【解决方案4】：

jQuery 非常适合将 当前元素 用作 $(this) 或 jQuery(this)，所以使用 like，

alert(jQuery(this).text()); // to alert the content of the selected item

alert(jQuery(this).val()); // to alert the value of the selected item

【讨论】：

问题是更改事件未触发，而不是警报

【解决方案5】：

JSFiddle Example

事件被触发，结果根据select 选项显示。

【讨论】：

请在您的答案中添加任何相关的更改代码

【解决方案6】：

你可以这样试试

 jQuery(document).ready(function() {
        jQuery('body').on('change','.variations select[name="up_options"]',function(){
           alert(jQuery('.single_variation').text());
           alert(jQuery
(this).val()); //Current Drowndown value
        });
    });

使用委托绑定事件是合适的最佳实践。

Fiddle Here

【讨论】：

将委托事件绑定到body 是不推荐的，因为它有一个与样式相关的错误（如果由于样式计算的高度为 0，它不会收到一些事件） .使用document 而不是作为默认值，如果没有其他更接近（在您的示例中，使用jQuery('.variations').on('change','select', function(){ 更有意义且更有效。
其次，原始代码也可以，所以问题出在尚未发现的地方:)