Javascript 根据所选选项更改输入大小

我看到过类似的问题贴出来，并试图修改它们以满足我的需要，但我对javascript的了解还不够。如果他们选择“状态”作为搜索选项，我只想将表单输入限制为2个字符。这就是我所拥有的：

function changeValue(){
var option=document.getElementById('searchtype').id;

if (option == ("A") || ("B") ){
document.getElementById('field').size="40";
}
else if(option=="C"){
document.getElementById('field').size="2";


<form action="results.php" method="post">
Search By:<br />
<select id="searchtype" name="searchtype" onchange="changeValue();">
<option id="A" value="name">Hospital Name<br /></option>
<option id="B" value="city">City</option>
<option id="C" value="state">State</option>
</select>
<br /><br />
Search:<br />
<input id="field" name="searchterm" type="text" size="0">

函数changeValue（）{
var option=document.getElementById（'searchtype'）.id；
如果（选项==（“A”）|（“B”））{
document.getElementById（'field'）.size=“40”；
}
否则如果（选项==“C”）{
document.getElementById（'field'）.size=“2”；
搜索人：

医院名称

城市
陈述



搜索：

我做错了什么，还是有更好的方法

我在下面使用了Jack的代码，并添加了field.size属性，因此我的输入匹配了允许的最大字符数：（谢谢Jack）

scripttype=“text/javascript”>
函数更改值（下拉列表）{
var option=dropdown.options[dropdown.selectedIndex].value，
field=document.getElementById（'field'）；
如果（选项=='name'| |选项=='city'）{
field.maxLength=40；
field.size=40；
}else if（选项=='state'）{
field.value=field.value.substr（0,2）；
field.maxLength=2；
field.size=2；
}
}       
医院搜索
搜索人：

医院名称

城市
陈述


搜索：

在决定用州列表下拉列表会更好之后，我将其更改为：

<form action="results.php" method="post">
      Hospital Name:<br />
      <input name="searchterm_name" type="text" size="40">
      <br />
      <input type="submit" name="submit" value="Search">
      </form><br />
        <form action="results.php" method="get">
        City Name:<br />
        <input name="searchterm_city" type="text" size="40"><br />
        <select name="select_state">
        <option value="">None
        <option value="AL" Selected>Alabama
        <option value="AK">Alaska
        <option value="AZ">Arizona
                    </SELECT>
        <input type="submit" name="submit" value="Search">
      </form>

医院名称：





城市名称：



没有一个
阿拉巴马州
阿拉斯加州
亚利桑那州

---

ED：使用表单方法“post”导致浏览器在我每次点击返回按钮进入结果页面时都会抛出警告。我更改为“get”，因为信息不敏感，现在返回时没有警告。

设置

maxlength

属性：

document.getElementById('field').maxlength = 2;

我现在意识到代码的其余部分不太可能工作：

function changeValue(dropdown) {
    var option = dropdown.options[dropdown.selectedIndex].value,
    field = document.getElementById('field');

    if (option == 'name' || option == 'city') {
        field.maxLength = 40;
    } else if (option == 'state') {
        field.value = field.value.substr(0, 2); // before reducing the maxlength, make sure it contains at most two characters; you could also reset the value altogether
        field.maxLength = 2;
    }
}​

然后在HTML中：

<select id="searchtype" name="searchtype" onchange="changeValue(this);">

试试这个

function changeValue() {
    var option2 = document.getElementById('searchtype').options[document.getElementById('searchtype').selectedIndex].id;
    if (option2 == ("A") || option2 == ("B")) {
        document.getElementById('field').size = "40";
    }
    else if (option2 == "C") {
        document.getElementById('field').size = "2";
    }
}​

试试这个

document.getElementById('field').setAttribute('size', "10");

---

更改下拉列表后，您不想清除文本框？是的，我想我可能会。我还意识到我应该给他们提供一个状态下拉菜单供选择，就像大多数SiteSize和maxlength是input tag的两个不同属性。他想更改大小而不是maxlength。@PriyankPatel引用：“我只想将表单输入限制为2个字符"-设置

maxlength

会限制表单输入。设置

大小只会更改外观。是的。我想将用户的状态限制为仅2个字符。尽管我意识到我真正应该做的是，如果他们选择按state@PriyankPatel不，仅限2个字符字符意味着设置最大长度；更新显示大小，尽管相关，但这是可选的；结果显示状态下拉列表会更好：）我将开始努力尝试找出状态下拉列表。我相信你很快就会看到我的另一个问题。哈哈。谢谢。我现在有两个问题。input字段默认为其他长度，直到我选择一个选项，然后返回到第一个选项的该选项。最后两个选项有效，但我的第二个问题是我认为PriyankPatel是正确的。我想限制maxlength和大小
document.getElementById('field').setAttribute('size', "10");