在选择 javascript 时不能使用下拉功能？

发布于 2024-11-19 22:21:25 字数 1463 浏览 3 评论 0原文

我是 JavaScript 新手。

我修改了一个函数，当用户从下拉菜单中选择“是”时，它会在 div 区域中创建 3 个文本框。

这是我的表单下拉代码：

    <select name="dosage" id="dosage" onchange="function dosage(sel)">
            <option value="No">No</option>
            <option value="Yes">Yes</option> 

    </select>
<div id="dosagearea"></div>

这是我修改的 javascript，最初在用户选择某些内容时向用户创建一个消息框。

    function dosage(sel)
{
   if(sel.options.selectedIndex == 0)
   {

      return false;
   }


    else if(sel.options.selectedIndex == 'Yes')
       {
          x=document.createElement('input');
                    x.setAttribute('rows',1);
                    x.setAttribute('cols',20);
                    x.name='dosage_emitted';
                    document.getElementById('dosagearea').appendChild(x);

            x=document.createElement('input');
                    x.setAttribute('rows',1);
                    x.setAttribute('cols',20);
                    x.name='dosage_absorbed';
                    document.getElementById('dosagearea').appendChild(x)


            x=document.createElement('input');
                    x.setAttribute('rows',1);
                    x.setAttribute('cols',20);
                    x.name='dosage_period';
                    document.getElementById('dosagearea').appendChild(x)
       }
    }

我检查了 firebug，没有返回任何 JS 错误，我认为我的函数没有以正确的方式调用。

谢谢

原文

I am new to javascript.

I have a function I modifed that when a user selects "Yes" from a pull down menu it creates 3 text boxes in a div area.

Here is my form pull down code:

    <select name="dosage" id="dosage" onchange="function dosage(sel)">
            <option value="No">No</option>
            <option value="Yes">Yes</option> 

    </select>
<div id="dosagearea"></div>

This is the javascript I modified which originally created a message box to the user when they selected something.

    function dosage(sel)
{
   if(sel.options.selectedIndex == 0)
   {

      return false;
   }


    else if(sel.options.selectedIndex == 'Yes')
       {
          x=document.createElement('input');
                    x.setAttribute('rows',1);
                    x.setAttribute('cols',20);
                    x.name='dosage_emitted';
                    document.getElementById('dosagearea').appendChild(x);

            x=document.createElement('input');
                    x.setAttribute('rows',1);
                    x.setAttribute('cols',20);
                    x.name='dosage_absorbed';
                    document.getElementById('dosagearea').appendChild(x)


            x=document.createElement('input');
                    x.setAttribute('rows',1);
                    x.setAttribute('cols',20);
                    x.name='dosage_period';
                    document.getElementById('dosagearea').appendChild(x)
       }
    }

I checked with firebug and no JS errors being returned, I think my function is not being called the right way.

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

自演自醉 2024-11-26 22:21:25

onchange 属性的值基本上是函数或某些 JavaScript 的名称。如果您想使用 select 元素作为参数来调用函数，则需要注意

<select name="dosage" id="dosage" onchange="dosage(this)">

，这不是推荐的方法，因为它将 HTML 与 JS 结合在一起。相反，尝试直接在 JS 中添加事件，如下所示

window.onload = function() {
    document.getElementById("dosage").onchange = dosage;
    function dosasage(event) {
        var sel = event.currentTarget;
    }
}

The value of the onchange property is basically the name of a function or some JavaScript. If you want to call your function with the select element as a parameter, you need to do

<select name="dosage" id="dosage" onchange="dosage(this)">

Note that this isn't the recommended way to do things as it couples your HTML with your JS. Instead, try adding the event directly in JS, like so

window.onload = function() {
    document.getElementById("dosage").onchange = dosage;
    function dosasage(event) {
        var sel = event.currentTarget;
    }
}

回复收藏 0 原文

深白境迁sunset 2024-11-26 22:21:25

尝试以下操作：onchange="dosage(this)"

回复收藏 0 原文

℉絮湮 2024-11-26 22:21:25

最好将字段放在 html 中，并在输入或占位符上显示：none。并在选择“yes”时切换到“display:block”。另外，您需要将事件侦听器更改为 onchange="dosage(this)"

或使其在此处如此

<select name="dosage" id="dosage" onchange="document.getElementById('dosagearea').style.display = this.options.selectedIndex ? 'block' : 'none'">
   <option value="No">No</option>
   <option value="Yes">Yes</option> 
</select>
<div id="dosagearea" style="display:none">
    <input type="text" name="dosage_emitted" />
    <input type="text" name="dosage_absorbed" />
    <input type="text" name="dosage_period" />
</div>

http://jsfiddle.net/t4cy7/

it's better to have the fields already in html with display:none either on the inputs or the placeholder. and toggle to display:block when yes is selected. Also, you need to change the event listener to onchange="dosage(this)"

or make it like this

<select name="dosage" id="dosage" onchange="document.getElementById('dosagearea').style.display = this.options.selectedIndex ? 'block' : 'none'">
   <option value="No">No</option>
   <option value="Yes">Yes</option> 
</select>
<div id="dosagearea" style="display:none">
    <input type="text" name="dosage_emitted" />
    <input type="text" name="dosage_absorbed" />
    <input type="text" name="dosage_period" />
</div>

here it is in action http://jsfiddle.net/t4cy7/

回复收藏 0 原文

~没有更多了~