Question

我正在使用this script在选择框中应用样式。它作为独立版本可以正常工作。

但我还需要在此选择框上应用跳转菜单功能。我尝试添加一个函数，但似乎两个脚本之间存在一些冲突。 jquery样式和跳转菜单功能无法同时协同工作。

你可以帮我解决一下吗？这是一个示例代码，让您知道我在这里处理的是什么：

<script type="text/javascript">
$(document).ready(function() {
 $('#jumpMenu').selectbox({debug: true});

 function MM_jumpMenu(targ,selObj,restore){ //v3.0
   eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
   if (restore) selObj.selectedIndex=0;
 }
});
</script>

<select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)">
       <option value="http://www.link1.com">link1</option>
       <option value="http://www.link2.com">link2</option>
       <option value="http://www.link3.com">link3</option>
</select>

Answer 1

怎么样：

$("#jumpMenu").change(function(e) {
    window.location.href = this.options[this.selectedIndex].value;
});

甚至

$("#jumpMenu").change(function(e) {
   url = this.options[this.selectedIndex].value;
   $("#output").load(url);
});

Answer 2

问题很明显。 selectbox插件创建一个div而不是select，以便可以设置样式。得到一个萤火虫插件，看看你自己。

因此没有解雇onchange。您必须了解插件的内容并找到一个放置回调函数的位置，该函数将触发您的onchange操作。

查看该插件是否提供了传递回调的选项。

Answer 3

请注意，jQuery在此示例中处理正确的索引值。一个更紧凑的脚本会读。

<script src="assets/jquery_1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function (){  
        $("#jumpMenu").change(function(e) {
            window.location.href = $(this).val();
        });
    });
</script>

HTML

<select name="jumpMenu" id="jumpMenu">
    <option>Choose A Page</option>
    <option value="page1.html">Page One Title</option>
    <option value="page2.html">Page Two Title</option>
</select>

Answer 4

我终于找到了解决方法。我在.js代码文件中做了一些更改

function getSelectOptions(parentid) {
        var select_options = new Array();
        var ul = document.createElement('ul');
        $select.children('option').each(function() {
            var li = document.createElement('li');
            li.setAttribute('id', $(this).val());/*applied the url as the id of the li item*/
            li.innerHTML = $(this).html();
            if ($(this).is(':selected')) {
                $input.val($(this).html());
                $(li).addClass(opt.currentClass);
            }
            ul.appendChild(li);
            $(li)
            .mouseover(function(event) {
                hasfocus = 1;
                if (opt.debug) console.log('over on : '+this.id);
                jQuery(event.target, $container).addClass(opt.hoverClass);
            })
            .mouseout(function(event) {
                hasfocus = -1;
                if (opt.debug) console.log('out on : '+this.id);
                jQuery(event.target, $container).removeClass(opt.hoverClass);
            })
            .click(function(event) {
              var fl = $('li.'+opt.hoverClass, $container).get(0);
                if (opt.debug) console.log('click on :'+this.id);
                $('li.'+opt.currentClass).removeClass(opt.currentClass); 
                $(this).addClass(opt.currentClass);
                document.location = this.id;/*redirect to the li item's id value on click event*/
                setCurrent();
                hideMe();
            });
        });
        return ul;
    }

在使用jquery设置样式的选择框上应用跳转菜单功能

4 个答案: