Question

我的代码有点问题。我正在尝试从下拉菜单进行计算，然后它将更改为文本框。我已经花了好几天试图找出它并用谷歌搜索方法来编写函数。任何人都可以帮助或给我如何处理这个问题的建议吗？

function numGuest()
{
    var a = document.getElementById("guests");
    if(a.options[a.selectedIndex].value == "0")
    {
        registration.banq.value = "0";
    }
    else if(a.options[a.selectedIndex].value == "1")
    {
        registration.banq.value = "30";
    }
}

<select id="guests" name="guests">
<option value="0">0</option>
<option value="1">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

<input type="text" id="banq" name="banq" onChange="numGuest()" disabled />

Answer 1

未定义注册。您需要以与guest元素相同的方式获取文本输入元素。此外，onChange侦听器应附加到选择菜单而不是文本区域。

<html>
<script>
function numGuest()
{
    var banq = document.getElementById('banq');
    var a = document.getElementById("guests");

    if(a.options[a.selectedIndex].value == "0")
    {
        banq.value = "0";
    }
    else if(a.options[a.selectedIndex].value == "1")
    {
        banq.value = "1";
    }
}
</script>
<select id="guests" name="guests"  onChange="numGuest()" >
    <option value="0">0</option>
    <option value="1">1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

    <input type="text" id="banq" name="banq" disabled />
</html>

Answer 2

为什么id = banq（textfield）被禁用？

启用： document.getElementById（'banq'）。disabled = false;

对于select：

的值

function numGuest(){
    var theGuestValForCalc = 0;
    var theFinalResult = 0;   

    theGuestValForCalc = document.getElementById('guests').options[document.getElementById('guests').selectedIndex].value;



    theFinalResult = theGuestValForCalc * 10 // or some value, calculation, etc.

    document.getElementById('banq').innerHTML = theFinalResult;

    // return theFinalResult;

}

Answer 3

在您的代码中：

> <input type="text" id="banq" name="banq" onChange="numGuest()" disabled />

那应该是readonl y字段，而不是禁用。

onchange监听器应该在select元素上。此外，为方便起见，您可以传递对侦听器中元素的引用：

<select name="guests" onchange="numGuest(this)">

然后在numGuest函数中：

function numGuest(element) {

和元素将是对其处理程序称为函数的元素的引用。

由于您说控件是在一个表单中，并且带有名称的表单控件被命名为它们所在表单的属性，因此您可以简化代码：

  var form = element.form;
  var banq = form.banq;
  var a = form.guests; // or element

如果所选选项有值（请参阅下面的注释），则可以直接使用select元素的value属性：

  if (a.value == "0") {
    banq.value = "0";

  } else if (a.value == "1") {
    banq.value = "1";
  }

你已经完成了。

注意：

如果选项没有值属性或属性，则其值为文本内容。不幸的是，IE的旧版本不支持，所以你必须使用select.options[select.selectedIndex].text。但最好的想法是始终为选项提供一个值，这样你就可以获得select元素的值。
无需提供表单控件名称和ID。他们必须有名字才能成功，所以只要给他们起名字就忘记身份。

Javascript下拉菜单计算

3 个答案: