2016-04-25 215 views
2

我有一個下拉列表,例如職業,當用戶點擊選項「其他」時,將顯示一個文本框,用戶必須指定他的職業。用戶選擇「其他」的部分並輸入他的職業作品,它節省了他輸入的內容,但是當用戶要從下拉列表中選擇或選擇時,我提交表單時沒有記錄該值。選擇選項沒有獲得價值

如何從選擇選項中獲取值?因爲我只有在用戶選擇「其他」並輸入他的職業時才能獲得價值。這是我的代碼。

function CheckOccupation(val){ 
 
var element=document.getElementById('occupation'); 
 
if(val=='Other') 
 
    element.style.display='block'; 
 
else 
 
    element.style.display='none'; 
 
}
<select class="form-control" name="occupation" onchange='CheckOccupation(this.value);'> 
 
\t <option> Select Occupation</option> 
 
\t <option> Lawyer </option> 
 
\t <option> Nurse </option> 
 
\t <option> Lawyer </option> 
 
\t <option> Teacher </option> 
 
\t <option> Programmer </option> 
 
\t <option> Accountant </option> 
 
\t <option> Other </option> 
 
</select> 
 

 
<input type="text" name="occupation" id="occupation" class="form-control" placeholder="please specify your occupation..." style='display:none;'/>

+0

'處問題'html' option'元素沒有'value'屬性設置? – guest271314

+0

順便說一下,您爲兩個元素使用相同的名稱。最好是改變他們 – Mojtaba

+0

我也嘗試過''但仍然一樣@ guest271314 – James

回答

0

設置的值屬性爲您的選擇領域,也可用於兩個領域

提供不同的名稱JS

function CheckOccupation(val){ 
var element=document.getElementById('occupation'); 
if(val==='Other') 
    element.style.display='block'; 
else 
    element.style.display='none'; 
} 

HTML

<select class="form-control" name="occupation1" onchange='CheckOccupation(this.value);'> 
    <option> Select Occupation</option> 
    <option value="Lawyer"> Lawyer </option> 
    <option value="Nurse"> Nurse </option> 
    <option value="Lawyer"> Lawyer </option> 
    <option value="Teacher"> Teacher </option> 
    <option value="Programmer"> Programmer </option> 
    <option value="Accountant"> Accountant </option> 
    <option value="Other"> Other </option> 
</select> 

<input type="text" name="occupation2" id="occupation" class="form-control" placeholder="please specify your occupation..." style='display:none;'/> 
0

<option>元素的內容不會自動它們的值。您必須指定一個value屬性。

function CheckOccupation(val){ 
 
var element=document.getElementById('occupation'); 
 
if(val=='Other') 
 
    element.style.display='block'; 
 
else 
 
    element.style.display='none'; 
 
}
<select class="form-control" name="occupation" onchange='CheckOccupation(this.value);'> 
 
\t <option> Select Occupation</option> 
 
\t <option> Lawyer </option> 
 
\t <option> Nurse </option> 
 
\t <option> Lawyer </option> 
 
\t <option> Teacher </option> 
 
\t <option> Programmer </option> 
 
\t <option> Accountant </option> 
 
\t <option value="Other"> Other </option> 
 
</select> 
 

 
<input type="text" name="occupation" id="occupation" class="form-control" placeholder="please specify your occupation..." style='display:none;'/>

+0

我之前做過,但仍然是相同的。 – James

+0

您仍然必須在表單提交中包含輸入的值。你不能給它相同的'name'屬性。 – user3297291

0

我想你可能需要指定選項標籤內的一些價值。 試試這個:

<select class="form-control" name="occupation" onchange='CheckOccupation(this.value);'> 
 
\t <option value="select"> Select Occupation</option> 
 
\t <option value="lawyer"> Lawyer </option> 
 
\t <option value="nurse"> Nurse </option> 
 
\t <option value="lawyer"> Lawyer </option> 
 
\t <option value="teacher"> Teacher </option> 
 
\t <option value="programmer"> Programmer </option> 
 
\t <option value="accountant"> Accountant </option> 
 
\t <option> Other </option> 
 
</select>

+0

我以前也做過,但它仍然沒有解決我的問題。 – James

0

你已經爲這兩個字段名稱= 「佔領」。嘗試對兩者使用不同的名稱。

<select class="form-control" name="occupation" onchange='CheckOccupation(this.value);'> 

<input type="text" name="occupation" id="occupation" class="form-control" placeholder="please specify your occupation..." style='display:none;'/> 
+0

好吧,我會試試。 – James

+0

謝謝您提交答案,我的問題解決了。我希望我能評價所有給予正確答覆的人,但我的特權是有限的。這工作壽! – James

0

見本我創建了一個爲你的plunker:Plunker link

儘量不要使用var元素。

0

這應該工作:

function CheckOccupation(selectedType){ 
 
    if (selectedType == 'Other'){ 
 
\t \t document.getElementById('occupation').style.display = 'block'; 
 
    
 
\t } else{ 
 
\t \t document.getElementById('occupation').style.display = 'none'; 
 
    
 
\t } 
 
}
<select class="form-control" name="occupation" onchange='CheckOccupation(this.value);'> 
 
\t <option> Select Occupation</option> 
 
\t <option value="Lawyer"> Lawyer </option> 
 
\t <option value="Nurse"> Nurse </option> 
 
\t <option value="Teacher"> Teacher </option> 
 
\t <option value="Programmer"> Programmer </option> 
 
\t <option value="Accountant"> Accountant </option> 
 
\t <option value="Other"> Other </option> 
 
</select> 
 

 
<input type="text" name="occupation_other" id="occupation" class="form-control" placeholder="please specify" style='display:none;'/>

0

的問題是,你命名的選擇(職業),然後輸入命名(職業)

他們未用相同發送名稱,嘗試更改其中任何一個

+0

謝謝您提交答案,我的問題解決了。我希望我能評價所有給予正確答覆的人,但我的特權是有限的。 – James

0

儘量用event代替this.value作爲參數傳遞給CheckOccupation;包括value屬性option元素;將name的值改爲#occupation改爲"other";還刪除重複<option>.innerHTML"Lawyer"

<script> 
 
    function CheckOccupation(event) { 
 
    var val = event.target.value; 
 
    var element = document.getElementById("occupation"); 
 
    if (val == "Other") 
 
     element.style.display = "block"; 
 
    else 
 
     element.style.display = "none"; 
 
    console.log(val) 
 
    } 
 
</script> 
 

 
<select class="form-control" name="occupation" onchange='CheckOccupation(event);'> 
 
    <option>Select Occupation</option> 
 
    <option value="Lawyer">Lawyer</option> 
 
    <option value="Nurse">Nurse</option> 
 
    <option value="Teacher">Teacher</option> 
 
    <option value="Programmer">Programmer</option> 
 
    <option value="Accountant">Accountant</option> 
 
    <option value="Other">Other</option> 
 
</select> 
 

 
<input type="text" name="other" id="occupation" class="form-control" placeholder="please specify your occupation..." style='display:none;' />