Question

我有一个使用CSS和HTML的下拉菜单的代码。有没有办法从用户按下的下拉菜单中识别哪个项目。（我想将用户引导到另一个页面中的表格，并根据用户的选择选择表格数据）这是代码。感谢。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<style>
ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul li {
    display: block;
    position: relative;
    float: left;
}
li ul {
    display: none;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #1e7c9a;
    margin-left: 1px;
    white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
    display: block;
    position: absolute;
}
li:hover li {
    float: none;
    font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
    background: #1e7c9a;
}
</style>
<form id="form" name="form" method="get" action="coverpage.php">
<ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Solder</a>
        <ul>
            <li><a href="#" onClick="MyWindow=window.open('http://localhost/Harness/Entermodel.php','MyWindow','toolbar=no,location=no,directories=no,status=no, menubar=no,scrollbars=no,resizable=no,width=400,height=300'); return false;">Pb</a></li>
            <li><a href="#">good</a></li>
            <li><a href="#">bad</a></li>
        </ul>
    </li>
    <li><a href="#">Machine Accessories</a>
        <ul>
            <li><a href="#">parts</a></li>
            <li><a href="#"> Table</a></li>
            <li><a href="#"> Chair</a></li>
            <li><a href="#"> Shelf</a></li>
            <li><a href="#">Invisible</a></li>
        </ul>
    </li>
    <li><a href="#">account</a>
        <ul>
            <li><a href="#">Online</a></li>
            <li><a href="#">Right Here</a></li>
            <li><a href="#">Somewhere Else</a></li>
        </ul>
    </li>

</ul>
</form>
</body>
</html>

Answer 1

<form id="form" name="form" method="get" action="coverpage.php">
    <ul id="menu">
        <? foreach($categories as $key => $category): ?>
        <li>
            <a href="http://www.example.com/page?cat=<?= $category['name']; ?>"><?= $category['name']; ?></a>
            <? if(count($category['sublinks']) > 0): ?>
                <ul>
                    <? foreach($category['sublinks'] as $key => $link): ?>
                    <li><a href="http://www.example.com/page?cat=<?= $category['name']; ?>&sub=<?= $link; ?>"><?= $link; ?></a></li>
                    <? endforeach; ?>
                </ul>
            <? endif; ?>
        </li>
        <? endforeach; ?>
    </ul>
</form>

这可能会有所帮助

Answer 2

以下是您的解决方案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>How to identify the selected item in drop down menu in a web page</title>
    <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        // fire function when DOM ready
        $(document).ready(function() {
            // bind click event on a tag inside ul li
            $('ul#menu li ul li a').bind('click',function(){ 
                // get text of a link       
                var liText = $.trim($(this).text());
                // window.open option 
                var winOption = 'toolbar=no,location=no,directories=no,status=no, menubar=no,scrollbars=no,resizable=no,width=400,height=300';
                // open window popup with query string menudata= your menu text
                // on php side you can get menu text with $_GET['menudata']              
                var MyWindow=window.open('http://localhost/Harness/Entermodel.php?menudata=' + liText,'MyWindow',winOption);
                return false;
            });
        });
    </script>
</head>

<body>
    <style>
    ul {
        font-family: Arial, Verdana;
        font-size: 14px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    ul li {
        display: block;
        position: relative;
        float: left;
    }
    li ul {
        display: none;
    }
    ul li a {
        display: block;
        text-decoration: none;
        color: #ffffff;
        border-top: 1px solid #ffffff;
        padding: 5px 15px 5px 15px;
        background: #1e7c9a;
        margin-left: 1px;
        white-space: nowrap;
    }
    ul li a:hover {
        background: #3b3b3b;
    }
    li:hover ul {
        display: block;
        position: absolute;
    }
    li:hover li {
        float: none;
        font-size: 11px;
    }
    li:hover a { background: #3b3b3b; }
    li:hover li a:hover {
        background: #1e7c9a;
    }
    </style>
    <form id="form" name="form" method="get" action="coverpage.php">
        <ul id="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Solder</a>
                <ul>
                    <li><a href="#">Pb</a></li>
                    <li><a href="#">good</a></li>
                    <li><a href="#">bad</a></li>
                </ul>
            </li>
            <li><a href="#">Machine Accessories</a>
                <ul>
                    <li><a href="#">parts</a></li>
                    <li><a href="#"> Table</a></li>
                    <li><a href="#"> Chair</a></li>
                    <li><a href="#"> Shelf</a></li>
                    <li><a href="#">Invisible</a></li>
                </ul>
            </li>
            <li><a href="#">account</a>
                <ul>
                    <li><a href="#">Online</a></li>
                    <li><a href="#">Right Here</a></li>
                    <li><a href="#">Somewhere Else</a></li>
                </ul>
            </li>
        </ul>
    </form>
</body>
</html>

如何在网页的下拉菜单中标识所选项目

2 个答案: