.change(function() { 更改选择菜单的选项后不提醒选项值

Question

更改选择菜单的选项后，以下调用函数不会提醒选项值：

不发出警报：

<script type="text/javascript">
jQuery(document).ready(function($){       
    $(".selectmenu").scrollectBox({                           
        preset: 'dropdown',
        numVisibleOptions: 4,
        scrollInterval: 150, 
        scrollOn: 'hover',
        listWidth: 160,
        onSelectEvent: null

}).change(function() {
   var optionvalue = $("select.selectmenu").val(); 
   alert('Selected value ' + optionvalue);     
 });
});

</script>

但以下更改功能独立发出警报

发出警报：

<script type="text/javascript">
   jQuery(document).ready(function($){    
      $(".selectmenu").change(function() {
       var optionvalue = $("select.selectmenu").val(); 
     alert('Selected value ' + optionvalue);        
     });
    });
</script>

---

    <select onchange="" name="selectmenu" id="translator" class="selectmenu" >
     <option value="Select Language">Select The Language</option>
     <option value="en|af">Afrikaans</option>
     <option value="en|sq">Albanian</option>
     </select>

如何从第一个代码块中获得警报？请注意，第一个代码块中的onSelectEvent: 是选项更改的自定义触发事件。

谢谢，

Answer 1

您的第一个代码不会alert，因为您将change 事件分配给document 而不是下拉列表。

编辑：评论回复

插件有以下两个option使用它。

onSelectEvent

用于处理选项选择的自定义事件处理程序。该函数可能有两个参数；点击对象（选项内的链接）和点击事件，例如：var customSelectHandler = function($obj, event){...};。默认为空。

onSelectFunc

将从默认处理程序中调用的函数（在开始时）。该函数可能有两个参数；点击对象（选项内的链接）和点击事件，例如：var extraFunc = function($obj, event){...};。默认为空。

Answer 2

您想将事件附加到选择框而不是文档。

jQuery(document).ready(function($){       
    $(".selectmenu").scrollectBox({                           
        // ...
    }).change(function() {
        var optionvalue = $("select.selectmenu").val(); 
        alert('Selected value ' + optionvalue); 
    });;    
})

jQuery 的“流利”语法总是返回您正在使用的对象，因此您可以将同一选择器上的方法链接在一起。

正如 Jai 所建议的，您也没有获得所选选项的值：

var optionvalue = $("option:selected", this).val();

Answer 3

试试这个：

jQuery(document).ready(function($){ 
   $(".selectmenu").scrollectBox({                           
      preset: 'dropdown',
      numVisibleOptions: 4,
      scrollInterval: 150, 
      scrollOn: 'hover',
      listWidth: 160,
      onSelectEvent: null
  }).change(function() { //<-------------------------------try it here.
     var optionvalue = $("option:selected", this).val();
     alert('Selected value ' + optionvalue); 
  });
});

Answer 4

你的第一个代码应该是这样的：

<script type="text/javascript">
    jQuery(document).ready(function($){       
        $(".selectmenu").scrollectBox({                           
            preset: 'dropdown',
            numVisibleOptions: 4,
            scrollInterval: 150, 
            scrollOn: 'hover',
            listWidth: 160,
            onSelectEvent: null
       });    

        $(".selectmenu").change(function() {
           var optionvalue = $("select.selectmenu").val(); 
         alert('Selected value ' + optionvalue);        
         });

     });
    </script>

--------------已编辑--------- ------------

脚本：

<script>
    $(document).ready(function () {
           var selectEvent = function($el){
            alert("You chose " + $el.html());
                return false;
            };
         $(".selectmenu").scrollectBox({                           
           preset: 'select',
            numVisibleOptions: 3,
            scrollOn: 'scroll',
            debug: true,
            onSelectEvent: selectEvent

         }); 
    });
</script>

HTML：

 <select name="selectmenu" class="selectmenu" >
        <option>Select The Language</option>
        <option value="en|af">Afrikaans</option>
        <option value="en|sq">Albanian</option>
 </select>

PS：在本地主机上测试:)

它不起作用，因为您有关于文档更改的警报，而不是在选择菜单更改中；）

感谢。

Answer 5

你有一个额外的}) 右括号

  $(".selectmenu").scrollectBox({                           
    preset: 'dropdown',
    numVisibleOptions: 4,
    scrollInterval: 150, 
    scrollOn: 'hover',
    listWidth: 160,
    onSelectEvent: null
});   
}).change(function() {
//^here..
   var optionvalue = $("select.selectmenu").val(); 
 alert('Selected value ' + optionvalue); 

 });

应该是

 $(".selectmenu").scrollectBox({                           
    preset: 'dropdown',
    numVisibleOptions: 4,
    scrollInterval: 150, 
    scrollOn: 'hover',
    listWidth: 160,
    onSelectEvent: null

 }).change(function() {....