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

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

但它也行不通。

请帮助我，我很困惑

Answer 1

试试这个

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

Answer 2

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

OR

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

<强> Demo

Answer 3

没有什么＆＃34;错误＆＃34;使用原始代码，但您可以进行以下改进：

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

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

Answer 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

Answer 5

<强> JSFiddle Example

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

Answer 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

关于更改jquery函数的问题

6 个答案:

您可以尝试这样