下拉菜单中的 onclick/onchange答案

【问题标题】：onclick/onchange in dropdown下拉菜单中的 onclick/onchange
【发布时间】：2012-10-09 08:41:49
【问题描述】：

我有这个

<h2 id="caption">Hello World</h2>
<select name="font" id="Font">
            <option onClick="document.getElementById('caption').style.fontFamily = 'courier';" value="courier">Courier</option>
            <option onClick="document.getElementById('caption').style.fontFamily = 'georgia';" value="georgia" >Georgia</option>
            <option onClick="document.getElementById('caption').style.fontFamily = 'palatino';" value="palatino">Palatino Linotype</option>
            <option onClick="document.getElementById('caption').style.fontFamily = 'times';" value="times">Times New Roman</option>
            <option onClick="document.getElementById('caption').style.fontFamily = 'arial';" value="arial">Arial</option>
            <option onClick="document.getElementById('caption').style.fontFamily = 'comic';" value="comic">Comic Sans</option>
            <option onClick="document.getElementById('caption').style.fontFamily = 'impact';" value="impact">Impact</option>
            <option onClick="document.getElementById('caption').style.fontFamily = 'lucida';" value="lucida">Lucida Console</option>
            <option onClick="document.getElementById('caption').style.fontFamily = 'trebuchet';" value="Trebuchet">Trebuchet</option>
            <option onClick="document.getElementById('caption').style.fontFamily = 'tahoma';" value="tahoma">Tahoma</option>
            </select>

这不会改变字体样式，，怎么了？

【问题讨论】：

你用的是什么浏览器？因为在 Firefox 15 中工作
您确定这些字体已安装在您的计算机中吗？
另外请指定您的操作系统。我已经为此代码设置了一个jsfiddle 条目：jsfiddle.net/saji89/bnNwr 其中一些似乎对我来说工作正常，在 Ubuntu 上的 Firefox 中，由于 Linux 上没有字体，休息失败。

标签： drop-down-menu fonts onclick onchange

【解决方案1】：

下拉选项不响应 onclick()。您需要使用 onchange()。代码是：

<h2 id="caption">Hello World</h2>
<select name="font" id="Font" onchange="document.getElementById('caption').style.fontFamily = document.getElementById('Font').value;">
        <option value="courier">Courier</option>
        <option value="georgia" >Georgia</option>
        <option value="palatino">Palatino Linotype</option>
        <option value="times">Times New Roman</option>
        <option value="arial">Arial</option>
        <option value="comic">Comic Sans</option>
        <option value="impact">Impact</option>
        <option value="lucida">Lucida Console</option>
        <option value="trebuchet">Trebuchet</option>
        <option value="tahoma">Tahoma</option>
</select>

【讨论】：

【解决方案2】：

<div>
    <ul id="ul_tipoItems" style="font-family: <?php echo $tipoItems;?>;">
        <select id="itemsText" name="cmb_tipografiaItems" onchange="javascript:document.getElementById('ul_tipoItems').style.fontfamily=document.getElementById('itemsText').value;">
            <option value="arial" <?php if ($tipoItems == 'arial'){ echo "selected";}?>>Arial</option>
            <option value="courier new" <?php if ($tipoItems == 'courier new'){ echo "selected";}?>>Courier</option>
            <option value="georgia" <?php if ($tipoItems == 'georgia'){ echo "selected";}?>>Georgia</option>
            <option value="times new roman" <?php if ($tipoItems == 'times new roman'){ echo "selected";}?>>Times new roman</option>
            <option value="trebuchet ms" <?php if ($tipoItems == 'trebuchet ms'){ echo "selected";}?>>Trebuchet MS</option>
            <option value="verdana" <?php if ($tipoItems == 'verdana'){ echo "selected";}?>>Verdana</option>
        </select>  << Asi luce un texto con tipografia >>
    </ul>
</div>

【讨论】：

请准确解释您为 OP 所做的工作。仅代码的答案信息量不大