根據選擇的選項更改輸入大小

我已經看到類似的問題發佈，並試圖改變它們來滿足我的需求，但我不知道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">

我做錯了什麼或有沒有更好的方法來做到這一點？

我用傑克的代碼下方，並增加了field.size屬性，所以我的輸入匹配允許的最大特點：（感謝傑克）

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：使用表單方法「後」造成瀏覽器每次我打的返回按鈕到結果頁面時拋出一個警告。由於信息不敏感，我改成了「得到」，現在它回去沒有警告。

來源

2012-05-29 whatdafrak

onchange下拉，你不想清除文本框？ – sgowd

是的，我想我可能會。我也只是意識到，我應該給他們一個下拉菜單的狀態來選擇像大多數網站 – whatdafrak

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

來源

2012-05-29 04:57:51

大小和maxlength是輸入標籤的兩個不同的屬性。他想改變尺寸而不是最大長度。 –

@PriyankPatel Quote：「我想要做的就是將表單輸入限制爲2個字符」 - 設置'maxlength'限制表單輸入。設置'size'只會改變外觀。 –

所以@Jack他想「改變輸入大小」...... –

試試這個

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

來源

2012-05-29 05:02:16 rt2800

非常接近。但我現在有兩個問題。輸入字段默認爲其他長度，直到我選擇一個選項，然後返回第一個選項的該選項。最後兩項工作，但我的第二個問題是我認爲PriyankPatel是正確的。我想限制最大長度和尺寸 – whatdafrak

試試這個。

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

來源

2012-05-29 05:05:37

嘗試過，但現在它根本沒有改變 – whatdafrak

根據選擇的選項更改輸入大小

回答

相關問題