根据选择的选项更改输入大小

Question

我已经看到发布的类似问题并尝试更改它们以满足我的需求，但我对 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">

我做错了什么还是有更好的方法来做到这一点？

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

script type="text/javascript">
function changeValue(dropdown) {
var option = dropdown.options[dropdown.selectedIndex].value,
field = document.getElementById('field');

if (option == 'name' || option == 'city') {
    field.maxLength = 40;
            field.size = 40;
} else if (option == 'state') {
    field.value = field.value.substr(0, 2); 
    field.maxLength = 2;
            field.size = 2;
}
}       
</script>

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

在决定使用状态列表的下拉菜单会更好之后，我将其更改为：

<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”会导致浏览器在我每次点击返回按钮进入结果页面时抛出警告。我改为“获取”，因为该信息不敏感，现在它会在没有警告的情况下返回。

Answer 1

设置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);">

Answer 2

试试这个。

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

Answer 3

试试这个

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";
    }
}​