我的选择表单中的 JavaScript 不适用于文本区域字段

Question

您好，我已经竭尽全力寻找有关此问题的答案，但没有任何东西可以回答我正在寻找的内容。

我有一个留言板，我想在其中创建一个下拉菜单，其中包含使用静态 html 的预制模板。这个想法是这样的：发帖者想要从表单下拉菜单中将预制的 html 标签加载到消息正文中。我让它在 Firefox 中完美工作...但是当然，IE 不支持 onclick 调用 javascript。在我的研究中，我不知疲倦地尝试改变来调用我的javascript，但我似乎无法让它工作._。任何帮助将不胜感激！谢谢。

下面是在 Firefox 中运行的 js 和 form。这里没有显示的是有一个文本区域，其中填充了脚本调用的值。

JAVASCRIPT:

function add_event_setup()
{
document.dataform.bodytext.value += "<center><img src=\"../../images/kick_ass_title.jpg\"><br><span class=\"event_title\">INSERT TEXT</span><br><br><table width=\"500\" bgcolor=\"#FF0000\"><tr><td bgcolor=\"#000000\"></td></tr></table></center>";
}


THE FORM:

<select class="formselect">
  <option value="Setup" class="formselect">--Setup--</option>
  <option value="Setup1" onclick="add_event_setup()" style="border: 1px solid gray" class="formselect">Setup 1</option>
</select>

Answer 1

尝试以下 3 种方法之一：

第一种方式

JAVASCRIPT

 function add_event_setup(selectElement) {

var val = selectElement.value;

if(val == "TF")
    alert("DO THIS");
else if(val == "JR")    
    alert("DO THAT");
else
    alert("something else"); }

HTML

<select class="formselect" onchange="add_event_setup(this);"> 
    <option value="Game Terms" class="formselect">--Game Terms--</option>
    <option value="TF" style="border: 1px solid gray" class="formselect">TimeFrame</option>
    <option value="JR" style="border: 1px solid gray" class="formselect">Jim Ross</option>
</select>

第二种方式

HTML + JAVASCRIPT
（确保脚本标签放置在选择标签之后，如下所示）

<select id="myform" class="formselect"> 

    <option value="Game Terms" class="formselect">--Game Terms--</option>
    <option value="TF" style="border: 1px solid gray" class="formselect">TimeFrame</option>
    <option value="JR" style="border: 1px solid gray" class="formselect">Jim Ross</option>
</select> 
<script>
document.getElementById("myform").addEventListener("change", function() {

    var val = this.value;

    if(val == "TF") {

        alert("DO THIS");
    } else if(val == "JR") {

        alert("DO THAT");

        } else
         alert("something else");


        }, false);
        </script>

第三种方式

以防万一您使用 jQuery：

JAVASCRIPT

    var MySelector = {

        setup : function() {

            $('#myform').bind('change', function() {

                var val = $(this).val();

                if(val == "TF") {

                    alert("DO THIS");
                } else if(val == "JR") {

                    alert("DO THAT");

                } else
                     alert("something else");           

            });

        }

    };

    $(document).ready(function() {

        MySelector.setup();
    });

HTML

    <select id="myform" class="formselect"> 

        <option value="Game Terms" class="formselect">--Game Terms--</option>
        <option value="TF" style="border: 1px solid gray" class="formselect">TimeFrame</option>
        <option value="JR" style="border: 1px solid gray" class="formselect">Jim Ross</option>
    </select>

Answer 2

您需要捕获 select 的 onchange 事件。

<select onchange="if(this.options[this.selectedIndex].value=='Setup1') add_event_setup();">

如果您想单独处理每个选项：

<script language="javascript">
    function handleChange(selectObject){
        switch(selectObject.options[selectObject.selectedIndex].value){
            case 'Setup':
                //handle Setup value
                break;
            case 'Setup1':
                //handle setup1
                break;
            default:
                //something by default, if you want
        }
    }
</script>
<select name="asdf" onchange="handleChange(this);">
    <option value="Setup">Setup</option>
    <option value="Setup1">Setup1</option>
</select>