个人中心
gpt4 book ai didi

javascript - 添加 Javascript 函数时选项菜单不起作用

转载 作者：行者123 更新时间：2023-11-28 07:45:04 24 4
gpt4 key购买 nike

我需要有关添加 javascript 时选项菜单不起作用的帮助。

我找到了此类下拉菜单的教程，菜单/下拉功能正常工作，但在选择选项时我无法让它执行我需要的操作。

当选择“非免费”时，我希望在菜单下打开 2 个 div。我在常规选项菜单上有适用于此的代码，该菜单未使用下面第一个示例中的 javascript 代码，但是当我尝试向此菜单添加其他功能代码时它不起作用。在使菜单正常工作的 javascript 中，有一些我没有看到或理解的东西。

原代码如下:

<!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>
<style>
/*Form*/

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
form > div {
    clear: both;
    overflow: hidden;
    padding: 1px;
    margin: 0;
}
input[type=text]:focus, input[type=email]:focus, input[type=url]:focus, input[type=password]:focus, textarea:focus {
    outline: 0;
    border: #f76e00 1px solid;
}

/*Dropdown*/

#dropdown {
    background-color: #d8f3ff;
    width: 100%;
    padding: 10px;
    text-align: left;
}
#dropdown2 {
    background-color: #eaeaea;
    width: 100%;
    padding: 10px;
    text-align: left;
}
#dropdown3 {
    background-color: #d8f3ff;
    width: 100%;
    padding: 10px;
    text-align: left;
}
.dropcont {
    position: relative;
    font-size: 12px;
    color: #666;
    text-decoration: none;
    text-align: left;
}
.trigger {
    color: #666;
    padding: 10px;
    font-size: 12px;
    width: 100%;
    background: #fff url(../images/select-arrow-open.png) 98% center no-repeat;
    display: block;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    text-decoration: none;
    text-align: left;
}
.trigger:hover {
    color: #666;
    background: #f5f5f5 url(../images/select-arrow-open.png) 98% center no-repeat;
    border: #f76e00 1px solid;
    text-decoration: none;
    text-align: left;
}
.activetrigger {
    color: #666;
    padding: 10px;
    font-size: 12px;
    width: 100%;
    background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
    display: block;
    border: #f76e00 1px solid;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    text-align: left;
}
.activetrigger:hover {
    background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
    color: #666;
    text-decoration: none;
}
.activetrigger:active {
    background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
    color: #666;
    text-decoration: none;
}
.dropcont ul {
    font-size: 12px;
    border: #f76e00 1px solid;
    border-top: none;
    background: #fff;
    list-style-type: none;
    padding: 10px;
    margin: 0;
    width: 100%;
    z-index: 100;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    text-align: left;
}
.dropcont ul li {
    padding: 5px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    text-decoration: none;
    text-align: left;
}
.dropcont ul li:hover {
    background: #f5f5f5;
    outline: none;
    text-decoration: none;
}
.dropcont ul li:first-child {
    display: none;
}
.dropcont ul li:last-child {
    border-bottom: none;
}
.dropdownhidden {
    display: none;
}
.dropdownvisible {
    height: auto;
}
.dropdownvisible {
    height: 100px;
    overflow-y: scroll;
    text-decoration: none;
    text-align: left;
}
.label {
    color: #666;
    font-size: 12px;
    margin-bottom: 5px;
    display: block;
    text-align: left;
}
a {
    color: #666;
    text-decoration: none;
}
a:hover {
    color: #f76e00;
}
/* Navigation */

nav ul {
    padding: 0 20px;
}
nav li {
    list-style: none;
    float: left;
    margin-right: 20px;
    padding: 10px;
    font-weight: 300;
}
nav li.current {
    background: #f5f5f5;
    border: 1px solid #ccc;
    border-bottom: none;
}
nav li.current a {
    color: #777;
    cursor: default;
}
#audiobook {
    position: relative;
    height: 200px;
    width: 100%;
    background-color: #6FF;
}
</style>

<script>
function tamingselect()
{
    if(!document.getElementById && !document.createTextNode){return;}

// Classes for the link and the visible dropdown
    var ts_selectclass='turnintodpdn';  // class to identify selects
    var ts_listclass='turnintoselect';      // class to identify ULs
    var ts_boxclass='dropcont';         // parent element
    var ts_triggeron='activetrigger';       // class for the active trigger link
    var ts_triggeroff='trigger';            // class for the inactive trigger link
    var ts_dropdownclosed='dropdownhidden'; // closed dropdown
    var ts_dropdownopen='dropdownvisible';  // open dropdown
/*
    Turn all selects into DOM dropdowns
*/
    var count=0;
    var toreplace=new Array();
    var sels=document.getElementsByTagName('select');
    for(var i=0;i<sels.length;i++){
        if (ts_check(sels[i],ts_selectclass))
        {
            var hiddenfield=document.createElement('input');
            hiddenfield.name=sels[i].name;
            hiddenfield.type='hidden';
            hiddenfield.id=sels[i].id;
            hiddenfield.value=sels[i].options[0].value;
            sels[i].parentNode.insertBefore(hiddenfield,sels[i])
            var trigger=document.createElement('a');
            ts_addclass(trigger,ts_triggeroff);
            trigger.href='#';
            trigger.onclick=function(){
                ts_swapclass(this,ts_triggeroff,ts_triggeron)
                ts_swapclass(this.parentNode.getElementsByTagName('ul')[0],ts_dropdownclosed,ts_dropdownopen);
                return false;
            }
            trigger.appendChild(document.createTextNode(sels[i].options[0].text));
            sels[i].parentNode.insertBefore(trigger,sels[i]);
            var replaceUL=document.createElement('ul');
            for(var j=0;j<sels[i].getElementsByTagName('option').length;j++)
            {
                var newli=document.createElement('li');
                var newa=document.createElement('a');
                newli.v=sels[i].getElementsByTagName('option')[j].value;
                newli.elm=hiddenfield;
                newli.istrigger=trigger;
                newa.href='#';
                newa.appendChild(document.createTextNode(
                sels[i].getElementsByTagName('option')[j].text));
                newli.onclick=function(){ 
                    this.elm.value=this.v;
                    ts_swapclass(this.istrigger,ts_triggeron,ts_triggeroff);
                    ts_swapclass(this.parentNode,ts_dropdownopen,ts_dropdownclosed)
                    this.istrigger.firstChild.nodeValue=this.firstChild.firstChild.nodeValue;
                    return false;
                }
                newli.appendChild(newa);
                replaceUL.appendChild(newli);
            }
            ts_addclass(replaceUL,ts_dropdownclosed);
            var div=document.createElement('div');
            div.appendChild(replaceUL);
            ts_addclass(div,ts_boxclass);
            sels[i].parentNode.insertBefore(div,sels[i])
            toreplace[count]=sels[i];
            count++;
        }
    }

/*
    Turn all ULs with the class defined above into dropdown navigations
*/  

    var uls=document.getElementsByTagName('ul');
    for(var i=0;i<uls.length;i++)
    {
        if(ts_check(uls[i],ts_listclass))
        {
            var newform=document.createElement('form');
            var newselect=document.createElement('select');
            for(j=0;j<uls[i].getElementsByTagName('a').length;j++)
            {
                var newopt=document.createElement('option');
                newopt.value=uls[i].getElementsByTagName('a')[j].href;  
                newopt.appendChild(document.createTextNode(uls[i].getElementsByTagName('a')[j].innerHTML)); 
                newselect.appendChild(newopt);
            }
            newselect.onchange=function()
            {
                window.location=this.options[this.selectedIndex].value;
            }
            newform.appendChild(newselect);
            uls[i].parentNode.insertBefore(newform,uls[i]);
            toreplace[count]=uls[i];
            count++;
        }
    }
    for(i=0;i<count;i++){
        toreplace[i].parentNode.removeChild(toreplace[i]);
    }
    function ts_check(o,c)
    {
        return new RegExp('\\b'+c+'\\b').test(o.className);
    }
    function ts_swapclass(o,c1,c2)
    {
        var cn=o.className
        o.className=!ts_check(o,c1)?cn.replace(c2,c1):cn.replace(c1,c2);
    }
    function ts_addclass(o,c)
    {
        if(!ts_check(o,c)){o.className+=o.className==''?c:' '+c;}
    }
}

window.onload=function()
{
    tamingselect();
    // add more functions if necessary
}
</script>

</head>

<body>

<div id="dropdown2">
  <form action="">
    <label class="label">What is cost?</label>
    <select class="turnintodpdn">
      <option>This is:</option>
      <option value="1">Free</option>
      <option value="2">Not free</option>
    </select>
  </form>
</div>

</body>
</html>

在文档的头部我添加了这个:

<script>
function NotFreeSelectCheck(nfSelect)
{
    if(nfSelect){
        slctOptionValue = document.getElementById("slctOption").value;
        if(slctOptionValue == nfSelect.value){
            document.getElementById("NotFreeDivCheck").style.display = "block";
            document.getElementById("ppaddrss").style.display = "block";
        }
        else{
            document.getElementById("NotFreeDivCheck").style.display = "none";
            document.getElementById("ppaddrss").style.display = "none";
        }
    }
    else{
        document.getElementById("NotFreeDivCheck").style.display = "none";
        document.getElementById("ppaddrss").style.display = "none";
    }
}
</script>

这是更新后的 html:

<div id="dropdown2">
                  <form action="">
                    <label class="label">What is cost?</label>
                    <select class="turnintodpdn" id="getFvalue" onchange="NotFreeSelectCheck(this);">
                      <option>This is:</option>
                      <option value="1">Free</option>

<option id="slctOption" value="2">Not free</option>
                    </select>
                  </form>
                </div>


<div id="NotFreeDivCheck" style="display:none;">
Price field
</div>

<div id="ppaddrss" style="display:none;">
Payment Address
</div>

无论我做什么，如果在第一个代码示例中添加了 javascript，则在菜单中选择“非免费”时，我无法打开 div。如果我从第一个示例中删除样式和 javascript 函数并将菜单设为普通菜单，则代码可以正常工作并显示 div“NotFreeDivCheck”和“ppaddrss”。我需要做什么才能完成这项工作？

为了清楚起见，如您所见，如果删除第一个示例中的 javascript，则此代码有效:

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

<script>
function NotFreeSelectCheck(nfSelect)
{
    if(nfSelect){
        slctOptionValue = document.getElementById("slctOption").value;
        if(slctOptionValue == nfSelect.value){
            document.getElementById("NotFreeDivCheck").style.display = "block";
            document.getElementById("ppaddrss").style.display = "block";
        }
        else{
            document.getElementById("NotFreeDivCheck").style.display = "none";
            document.getElementById("ppaddrss").style.display = "none";
        }
    }
    else{
        document.getElementById("NotFreeDivCheck").style.display = "none";
        document.getElementById("ppaddrss").style.display = "none";
    }
}
</script>

</head>

<body>

<div id="dropdown2">
  <form action="">
    <label class="label">What is cost?</label>
    <select id="getFvalue" onchange="NotFreeSelectCheck(this);">
      <option>This is:</option>
      <option value="1">Free</option>
      <option id="slctOption" value="2">Not free</option>
    </select>
  </form>
</div>

<div id="NotFreeDivCheck" style="display:none;"> Price field </div>

<div id="ppaddrss" style="display:none;"> Payment Address </div>

</body>
</html>

请帮忙，谢谢!

最佳答案

您正在使用的脚本将所有 SELECT 元素转换为 DOM 下拉列表，因此您的这行函数不起作用:

slctOptionValue = document.getElementById("slctOption").value;

因为 document.getElementById("slctOption") 没有定义。您可以对其进行硬编码，因为它只是一个值:

slctOptionValue = 2;

此外，您的 onchange 将永远不会触发，因为 SELECT 正在被替换。而是修改这段代码:

newli.onclick=function(){ 
    this.elm.value=this.v;
    NotFreeSelectCheck(this.elm); /* Added this line */
    ts_swapclass(this.istrigger,ts_triggeron,ts_triggeroff);
    ts_swapclass(this.parentNode,ts_dropdownopen,ts_dropdownclosed)
    this.istrigger.firstChild.nodeValue=this.firstChild.firstChild.nodeValue;
    return false;
}

您还应该通过 JSHint 运行您的脚本。它缺少几个分号，并且还有其他问题需要清理。

这是一个 jsfiddle:http://jsfiddle.net/3k6795dm/17/

关于javascript - 添加 Javascript 函数时选项菜单不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30740416/

24 4 0
文章推荐： c++ - 当我打印到屏幕或文件时，Expat 打印出垃圾
文章推荐： c++ - waf 在构建时指定库，但在配置时获取全名
文章推荐： javascript - 为什么 Twitter 的 typeahead.js 不能与我的 JSON 配合使用？
文章推荐： html - 选中复选框时如何定位外部 Div
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com