Dropdown onchange函数调用不起作用

在我的页面中，我使用了一个下拉菜单。当更改下拉值时，它将调用名为sample的函数。但onchange功能不起作用。任何人都可以帮助我解决这个问题。Dropdown onchange函数调用不起作用

<!doctype html>  
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Autocomplete - Combobox</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <style> 
    .ui-combobox { 
     position: relative; 
     display: inline-block; 
    } 
    .ui-combobox-toggle { 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     margin-left: -1px; 
     padding: 0; 
     /* support: IE7 */ 
     *height: 1.7em; 
     *top: 0.1em; 
    } 
    .ui-combobox-input { 
     margin: 0; 
     padding: 0.3em; 
    } 
    </style>

JS文件

<script> 
    (function($) { 
     $.widget("ui.combobox", { 
      _create: function() { 
       var input, 
        that = this, 
        wasOpen = false, 
        select = this.element.hide(), 
        selected = select.children(":selected"), 
        value = selected.val() ? selected.text() : "", 
        wrapper = this.wrapper = $("<span>") 
         .addClass("ui-combobox") 
         .insertAfter(select); 

       function removeIfInvalid(element) { 
        var value = $(element).val(), 
         matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(value) + "$", "i"), 
         valid = false; 
        select.children("option").each(function() { 
         if ($(this).text().match(matcher)) { 
          this.selected = valid = true; 
          return false; 
         } 
        }); 

        if (!valid) { 
         // remove invalid value, as it didn't match anything 
         $(element) 
          .val("") 
          .attr("title", value + " didn't match any item") 
          .tooltip("open"); 
         select.val(""); 
         setTimeout(function() { 
          input.tooltip("close").attr("title", ""); 
         }, 2500); 
         input.data("ui-autocomplete").term = ""; 
        } 
       } 

       input = $("<input>") 
        .appendTo(wrapper) 
        .val(value) 
        .attr("title", "") 
        .addClass("ui-state-default ui-combobox-input") 
        .autocomplete({ 
         delay: 0, 
         minLength: 0, 
         source: function(request, response) { 
          var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
          response(select.children("option").map(function() { 
           var text = $(this).text(); 
           if (this.value && (!request.term || matcher.test(text))) 
            return { 
             label: text.replace(
              new RegExp(
               "(?![^&;]+;)(?!<[^<>]*)(" + 
               $.ui.autocomplete.escapeRegex(request.term) + 
               ")(?![^<>]*>)(?![^&;]+;)", "gi" 
              ), "<strong>$1</strong>"), 
             value: text, 
             option: this 
            }; 
          })); 
         }, 
         select: function(event, ui) { 
          ui.item.option.selected = true; 
          that._trigger("selected", event, { 
           item: ui.item.option 
          }); 
         }, 
         change: function(event, ui) { 
          if (!ui.item) { 
           removeIfInvalid(this); 
          } 
         } 
        }) 
        .addClass("ui-widget ui-widget-content ui-corner-left"); 

       input.data("ui-autocomplete")._renderItem = function(ul, item) { 
        return $("<li>") 
         .append("<a>" + item.label + "</a>") 
         .appendTo(ul); 
       }; 

       $("<a>") 
        .attr("tabIndex", -1) 
        .attr("title", "Show All Items") 
        .tooltip() 
        .appendTo(wrapper) 
        .button({ 
         icons: { 
          primary: "ui-icon-triangle-1-s" 
         }, 
         text: false 
        }) 
        .removeClass("ui-corner-all") 
        .addClass("ui-corner-right ui-combobox-toggle") 
        .mousedown(function() { 
         wasOpen = input.autocomplete("widget").is(":visible"); 
        }) 
        .click(function() { 
         input.focus(); 

         // close if already visible 
         if (wasOpen) { 
          return; 
         } 

         // pass empty string as value to search for, displaying all results 
         input.autocomplete("search", ""); 
        }); 

       input.tooltip({ 
        tooltipClass: "ui-state-highlight" 
       }); 
      }, 

      _destroy: function() { 
       this.wrapper.remove(); 
       this.element.show(); 
      } 
     }); 
    })(jQuery); 

    $(function() { 
     $("#combobox").combobox(); 
     $("#toggle").click(function() { 
      $("#combobox").toggle(); 
     }); 
    }); 
function sample() 
{ 
alert("testing"); 
}  
</script> 
</head> 
<body>

HTML编码

<div class="ui-widget"> 
    <label>Your preferred programming language: </label> 
    <select id="combobox" onchange="sample();"> 
     <option value="">Select one...</option> 
     <option value="ActionScript">ActionScript</option> 
     <option value="AppleScript">AppleScript</option> 
     <option value="Asp">Asp</option> 
     <option value="BASIC">BASIC</option> 
     <option value="C">C</option> 
     <option value="C++">C++</option> 
     <option value="Clojure">Clojure</option> 
     <option value="COBOL">COBOL</option> 
     <option value="ColdFusion">ColdFusion</option> 
     <option value="Erlang">Erlang</option> 
     <option value="Fortran">Fortran</option> 
     <option value="Groovy">Groovy</option> 
     <option value="Haskell">Haskell</option> 
     <option value="Java">Java</option> 
     <option value="JavaScript">JavaScript</option> 
     <option value="Lisp">Lisp</option> 
     <option value="Perl">Perl</option> 
     <option value="PHP">PHP</option> 
     <option value="Python">Python</option> 
     <option value="Ruby">Ruby</option> 
     <option value="Scala">Scala</option> 
     <option value="Scheme">Scheme</option> 
    </select> 
</div> 
<button id="toggle">Show underlying select</button> 


</body> 
</html>

来源

2013-02-18 Rithu

什么是你写有问题的js文件的名称？ – Hkachhia 2013-02-18 12:11:18

我从这个URL的编码只用于自动完成功能http://jqueryui.com/resources/demos/autocomplete/combobox.html – Rithu 2013-02-18 12:13:51

没有必要在js文件中写脚本标记，但在你的js文件中你有写脚本标记以及html代码。为什么？ – Hkachhia 2013-02-18 12:17:16

默认平变化的选择框的事件，因为它得到的jQuery UI转换将无法正常工作。

使用jQuery UI内置事件一样：

$("#combobox").autocomplete({ 
change: function(event, ui) { alert("testing");} 
});

编号：http://api.jqueryui.com/autocomplete/#event-change

---- ----编辑

解决方案是在这里：可能的重复：jquery UI Combobox ONCHANGE

来源

2013-02-18 12:21:50

不适用于我 – cIph3r 2013-02-18 12:40:19

你在哪里写你的代码 – 2013-02-18 12:43:43

在匿名函数的结尾，使组合框到一个在这行后面的组合框 – cIph3r 2013-02-18 12:44:52

这是因为jqueryUI（或你的代码？！）隐藏了原来的组合框，并用它自己替换它。

使用萤火虫或类似物来检查组合框。它被隐藏了！

您可以使用JS-事件侦听解决它，像你这样在这里：

$("#toggle").click(function() { 
$("#combobox").toggle(); 
});

然而，

$(".ui-combobox input").change(function(){ 
    sample(); 
});

这是不行的，因为变化不是由选择触发。只能通过手动输入。所以你将不得不触发它：

select: function(event, ui) { 

       $(this).trigger("change"); // here 
          ui.item.option.selected = true; 
          that._trigger("selected", event, { 
           item: ui.item.option 
          }); 
         },

来源

2013-02-18 12:23:09 cIph3r

任何编码该事件监听器处理的示例 – Rithu 2013-02-18 12:24:52

Dropdown onchange函数调用不起作用

回答

相关问题