如何识别网页下拉菜单中的选定项目答案

【问题标题】：How to identify the selected item in drop down menu in a web page如何识别网页下拉菜单中的选定项目
【发布时间】：2013-06-11 19:06:03
【问题描述】：

我有一个使用 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>

【问题讨论】：

有什么问题
你为什么不使用like.. ???
我看到你有onClick="MyWindow=window.open，那个方法有什么问题？
谢谢。但问题是我想将下拉菜单的选定项名称传递到下一页。
您也应该使用 php 渲染下拉菜单的 html。这样，您可以将所需的项目名称作为婴儿车添加到每个链接中的 URL。

标签： php html css

【解决方案1】：

这是您的解决方案：

<!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】：

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

这可能会有所帮助

【讨论】：