在使用select选项时,我在这个PHP代码中哪里错了?

时间:2013-01-16 05:47:01

标签: javascript php jquery ajax

我正在处理一个表单,我想在其中选择值,当用户选择yes值时,我想显示一个文本框部分,但是以下代码对我不起作用。

<select id="gap" name="gap" onclick="gap_textbox();">
    <option value='select'>Select</option>
    <option value='yes'>Yes</option>
    <option value='no'>No</option>
</select>

<input type="text" name="gap_box" id="gap_text_box" />

<script type="text/javascript">
    function gap_textbox() {
        alert ("am here" + "  " +document.getElementById("gap").value);
        if (document.getElementById("gap").value =='select') {
            alert ("in value = select");
            document.getElementById("gap_text_box").disable=true;
        }
        else if (document.getElementById("gap").value =='no') {
            alert ("in value = no");
            document.getElementById("gap_text_box").disable=true;
        } else {
            alert ("in value = yes");
            document.getElementById("gap_text_box").disable=false;
        }
    }
</script>

2 个答案:

答案 0 :(得分:0)

在以下一行......

<select id="gap" name="gap" onclick="gap_textbox();">

...您需要使用onchange代替onclick

但是,使用内联点击处理程序被认为是过时的,难以维护。您应该使用正确的JavaScript事件处理...

document.getElementById("gap").onchange = function() {
    gap_textbox()
};

或者,更好的是,使用库,例如​​jQuery ......

$('#gap').change(function() {
    gap_textbox();
});

答案 1 :(得分:0)

尝试以下代码。只有更改后,onclick函数替换为onchange。对于选择框,您必须使用onChange功能。我们没有点击选择框中的任何内容。

<select id="gap" name="gap" onchange="gap_textbox();">
<option value='select'>Select</option>
<option value='yes'>Yes</option>
<option value='no'>No</option>
</select>
<input type="text" name="gap_box" id="gap_text_box" />
<script type="text/javascript">
function gap_textbox()
{
  alert ("am here" + "  " +document.getElementById("gap").value);
  if (document.getElementById("gap").value =='select') 
  {
    alert ("in value = select");
    document.getElementById("gap_text_box").disable=true;
  }
  else if (document.getElementById("gap").value =='no') 
  {
    alert ("in value = no");
    document.getElementById("gap_text_box").disable=true;
  }
  else 
  {
    alert ("in value = yes");
    document.getElementById("gap_text_box").disable=false;
  }
}
</script>