如果它位于下拉 HTML 中，如何激活 javascript onclick 按钮？答案

【问题标题】：How to activate a javascript onclick button if it's inside a drop down HTML?如果它位于下拉 HTML 中，如何激活 javascript onclick 按钮？
【发布时间】：2020-08-22 04:26:17
【问题描述】：

我有一个功能应该在选择字体大小时调整文本区域内的字体大小。它工作得很好......但是如果我开始将字体大小的选择放在下拉菜单中，它就不再工作了。

下面是代码现在的样子：

        var documenttextsizer={

        prevcontrol: '', 
        existingclasses: '',

        setpageclass:function(control, newclass){
            if (this.prevcontrol!='')
                    this.css(this.prevcontrol, 'selectedtoggler', 'remove') 
            document.documentElement.className=this.existingclasses+' '+newclass
            this.css(control, 'selectedtoggler', 'add') 
            this.setCookie('pagesetting', newclass, 5) 
            this.prevcontrol=control
        },

        css:function(el, targetclass, action){
            var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
            if (action=="check")
                return needle.test(el.className)
            else if (action=="remove")
                el.className=el.className.replace(needle, "")
            else if (action=="add")
                el.className+=" "+targetclass
        },

        getCookie:function(Name){ 
            var re=new RegExp(Name+"=[^;]+", "i"); 
            if (document.cookie.match(re)) 
                return document.cookie.match(re)[0].split("=")[1] 
            return null
        },

        setCookie:function(name, value, days){
            if (typeof days!="undefined"){ 
                var expireDate = new Date()
                var expstring=expireDate.setDate(expireDate.getDate()+days)
                document.cookie = name+"="+value+"; path=/; expires="+expireDate.toGMTString()
            }
            else
                document.cookie = name+"="+value
        },

        setup:function(targetclass){
            this.existingclasses=document.documentElement.className
            var persistedsetting=this.getCookie('pagesetting')
            var alllinks=document.getElementsByTagName("a")
            for (var i=0; i<alllinks.length; i++){
                if (this.css(alllinks[i], targetclass, "check")){
                    if (alllinks[i].getAttribute("rel")==persistedsetting) 
                        this.setpageclass(alllinks[i], alllinks[i].getAttribute("rel")) 
                    alllinks[i].onclick=function(){
                        documenttextsizer.setpageclass(this, this.getAttribute("rel"))
                        return false
                    }
                }
            }
        }

        }

    

        documenttextsizer.setup("texttoggler")

.xsmallview textarea{
font-size: 11px;
}

.smallview textarea{
font-size: 13px;
}

.normalview{ 
}

.largeview textarea{
font-size: 21px;
}

.xlargeview textarea{
font-size: 24px;
}

&lt;textarea cols="40" rows="8"&gt;&lt;/textarea&gt;

  <select>
    <option><a href="#" class="texttoggler" rel="xsmallview">14px</a></option>
    <option><a href="#" class="texttoggler" rel="smallview">15px</a></option>
    <option><a href="#" class="texttoggler" rel="largeview">16px</a></option>
    <option><a href="#" class="texttoggler" rel="xlargeview">18px</a></option>
  </select>

很抱歉提出这样的问题。但是我已经为此工作了一段时间，但我仍然无法自己解决。

【问题讨论】：

标签： javascript html css

【解决方案1】：

<option>标签不接受html，只有标签本身的文本和属性才有效。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

您需要为每个选项标签创建一个value，例如：

<select id="fontSizeToggle">
<option value="14">14px</option>
<option value="15">15px</option>
</select>

然后读取选择框的值并执行相应的动作

【讨论】：