关于更改 jquery 函数的问题

Question

我遇到了一个非常奇怪的问题。我有一个下拉选项

<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 函数来提醒我 selected 值，但它不起作用。

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

但是，当我将 change 编辑为 click 时，它运行良好（完美意味着它仅在单击时运行），当我单击 select 时，它会提醒我...但是当我再次将其更改为 change 时，它不起作用。

我也试试这个

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

但还是不行。

请帮帮我，我对此很困惑

Answer 1

试试这个

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

Answer 2

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

Answer 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

Answer 4

JSFiddle Example

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

Answer 5

你可以这样试试

 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

Answer 6

原来的代码没有什么"wrong"，但是你可以做以下改进：

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

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

关于更改 jquery 函数的问题

Issue on change jquery function

jquery

wordpress

onchange

你可以这样试试