我想设置一个文本框的 maxLength，这取决于用户对前一个文本框的回答答案

【问题标题】：I want to set maxLength of a textbox which depends on the users answer to a previous textbox我想设置一个文本框的 maxLength，这取决于用户对前一个文本框的回答
【发布时间】：2014-04-02 04:20:54
【问题描述】：

所以基本上 HTML 表单会询问他们属于哪家公司，以及他们是否选择例如：-

<select name="catg" onchange='maxlength()'>
<option> Select..</option>
        <option value="stu">Uni Student</option>
        <option value="anothersstu">Student at another institution</option>
        <option value="staff">Uni Staff</option>
        <option value="other">other</option>

    </select><br />
    Student Number / Staff Number: <input type="text" name="ss"/> <br />

    function maxlength(){
    if(test.catg.selected=="stu"){
    test.ss.maxlength='8';
    .focus();
    .select();}
    return;
    }

如果用户选择 Uni student 或 Uni staff，Student Number/Staff Number texbox 的 maxlength 需要为 8。

我怎样才能做到这一点？我已经尝试过 onChange 但无法让它工作。

【问题讨论】：

你的代码在哪里？以及maxlength 是如何计算的？
@Pilot，抱歉现在已经添加了，我以为我之前添加了它

标签： javascript html forms onchange

【解决方案1】：

你可以这样做：

HTML：

<select id="select">
<option>Select..</option>
<option value="stu">Uni Student</option>
<option value="anothersstu">Student at another institution</option>
<option value="staff">Uni Staff</option>
<option value="other">other</option>
</select>
<br />Student Number / Staff Number:
<input type="text" id="txt" name="ss" />
<br />

JS：

 document.getElementById('select').onchange = (function(){
    if(this.value=="stu"){
     document.getElementById('txt').maxLength=8;
    }else{
     document.getElementById('txt').removeAttribute('maxLength');
    }
});

所以根据你的要求，做ifelse if条件

演示：http://jsfiddle.net/AmitJoki/8ZewM/2

【讨论】：

这里一旦我们选择 stu 然后它将设置 8 作为 maxlength 然后我选择其他选项 maxlength 为 8。
Cannot set property 'onchange' of null - 这是我在运行 chrome 时遇到的错误。 @AmitJoki

【解决方案2】：

<select name="catg" onchange='maxlength()'>
<option> Select..</option>
        <option value="stu">Uni Student</option>
        <option value="anothersstu">Student at another institution</option>
        <option value="staff">Uni Staff</option>
        <option value="other">other</option>

    </select><br />
    Student Number / Staff Number: <input type="text" name="ss" id="ss"/> <br />

jquery：

$('select').change(function () {
        var value = this.value;
     if(value=='stu')
     {
          $("#ss").attr('maxlength','8');
     }
     else
     {
          $("#ss").attr('maxlength',''); // clear maxlength if not stu
     }
    });

【讨论】：

【解决方案3】：

<select id="selopt" onchange="maxlength()">
<option value="stu">Uni Student</option>
<option value="anothersstu">Student at another institution</option>
<option value="staff">Uni Staff</option>
<option value="other">other</option>
</select>

Student Number / Staff Number: <input type="text" id="ss" maxlength=""/> <br />

function maxlength(){
var x = document.getElementById("selopt").selectedIndex;
if(document.getElementById("selopt")[x].value=="stu"){
document.getElementById("ss").maxLength=8;
}
return;
}

【讨论】：

【解决方案4】：

<select name="catg" id="catg" onchange="maxLengthFunction()">
        <option> Select..</option>
        <option value="stu">Uni Student</option>
        <option value="anothersstu">Student at another institution</option>
        <option value="staff">Uni Staff</option>
        <option value="other">other</option>

 </select><br />

Student Number / Staff Number: <input type="text" name="ss" id="ss" />

在 Javascript 中

function maxLengthFunction()
{

   var ddl = document.getElementById("catg");
   var strOption = ddl.options[ddl.selectedIndex].text

   if(strOption == "Uni Student" || strOption == "Uni Staff" )
       document.getElementById("ss").maxLength="8";
   else 
      document.getElementById("ss").removeAttribute('maxLength');
}

【讨论】：

【解决方案5】：

试试这个

   $(document).ready(function(){
    $("#sele").change(function(){
    var optext=$("#sele option:selected").text();
    if(optext=='Uni Student'||optext=='Uni Staff'){
     $("#tname").val("");
     $("#tname").attr('maxlength','8');
   }
   else{
       $("#tname").val("");
      $("#tname").attr('maxlength','');
   }
  });
 });




  <select  name="sele" id="sele" > <option> Select..</option>
  <option value="stu">Uni Student</option>
   <option value="anothersstu">Student at another institution</option>
  <option value="staff">Uni Staff</option>
  <option value="other">other</option>

 </select><br />
  Student Number / Staff Number: <input type="text" name="ss" id="tname"/>

【讨论】：