Select 选项没有得到值
Select option does not get the value
我有一个下拉列表,例如职业,当用户单击选项 "Other" 时,会出现一个文本框,用户必须指定他的职业。用户选择 "Other" 并输入职业的部分有效,它保存了他输入的内容,但是当用户打算从下拉列表中选择或 select 时,该值不被记录我提交表格。
如何从 select 选项中获取值?因为我只有在用户 select "Other" 并输入他的职业时才得到值。这是我的代码。
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);'>
<option> Select Occupation</option>
<option> Lawyer </option>
<option> Nurse </option>
<option> Lawyer </option>
<option> Teacher </option>
<option> Programmer </option>
<option> Accountant </option>
<option> Other </option>
</select>
<input type="text" name="occupation" id="occupation" class="form-control" placeholder="please specify your occupation..." style='display:none;'/>
<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);'>
<option> Select Occupation</option>
<option> Lawyer </option>
<option> Nurse </option>
<option> Lawyer </option>
<option> Teacher </option>
<option> Programmer </option>
<option> Accountant </option>
<option value="Other"> Other </option>
</select>
<input type="text" name="occupation" id="occupation" class="form-control" placeholder="please specify your occupation..." style='display:none;'/>
我认为您可能需要在选项标记中指定一些值。
试试这个:
<select class="form-control" name="occupation" onchange='CheckOccupation(this.value);'>
<option value="select"> 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> Other </option>
</select>
您已为两个字段设置名称="occupation"。尝试为两者使用不同的名称。
<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;'/>
为您的选项字段设置一个值属性,并为两个字段提供不同的名称
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;'/>
看到这个。我为您创建了一个 Plunker:Plunker link
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<select class="form-control" name="occupation" onchange='CheckOccupation(this.value);'>
<option value="select"> 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="occupation" id="occupation" class="form-control" placeholder="please specify your occupation..." style='display:none;'/>
<script>
function CheckOccupation(val) {
console.log(val);
var element=document.getElementById('occupation');
if(val=='other')
document.getElementById('occupation').style.display='block';
else
document.getElementById('occupation').style.display='none';
}
</script>
</body>
</html>
尽量不要使用var元素
这应该有效:
function CheckOccupation(selectedType){
if (selectedType == 'Other'){
document.getElementById('occupation').style.display = 'block';
} else{
document.getElementById('occupation').style.display = 'none';
}
}
<select class="form-control" name="occupation" onchange='CheckOccupation(this.value);'>
<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="occupation_other" id="occupation" class="form-control" placeholder="please specify" style='display:none;'/>
问题是你命名为select(职业)然后命名为输入(职业)
无法以相同的名称发送,请尝试更改其中任何一个
尝试用 event
代替 this.value
作为传递给 CheckOccupation
的参数;在 option
元素中包含 value
属性;将 #occupation
处的 name
值更改为 "other"
;还删除具有 .innerHTML
"Lawyer"
的重复 <option>
<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;' />
我有一个下拉列表,例如职业,当用户单击选项 "Other" 时,会出现一个文本框,用户必须指定他的职业。用户选择 "Other" 并输入职业的部分有效,它保存了他输入的内容,但是当用户打算从下拉列表中选择或 select 时,该值不被记录我提交表格。
如何从 select 选项中获取值?因为我只有在用户 select "Other" 并输入他的职业时才得到值。这是我的代码。
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);'>
<option> Select Occupation</option>
<option> Lawyer </option>
<option> Nurse </option>
<option> Lawyer </option>
<option> Teacher </option>
<option> Programmer </option>
<option> Accountant </option>
<option> Other </option>
</select>
<input type="text" name="occupation" id="occupation" class="form-control" placeholder="please specify your occupation..." style='display:none;'/>
<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);'>
<option> Select Occupation</option>
<option> Lawyer </option>
<option> Nurse </option>
<option> Lawyer </option>
<option> Teacher </option>
<option> Programmer </option>
<option> Accountant </option>
<option value="Other"> Other </option>
</select>
<input type="text" name="occupation" id="occupation" class="form-control" placeholder="please specify your occupation..." style='display:none;'/>
我认为您可能需要在选项标记中指定一些值。 试试这个:
<select class="form-control" name="occupation" onchange='CheckOccupation(this.value);'>
<option value="select"> 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> Other </option>
</select>
您已为两个字段设置名称="occupation"。尝试为两者使用不同的名称。
<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;'/>
为您的选项字段设置一个值属性,并为两个字段提供不同的名称
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;'/>
看到这个。我为您创建了一个 Plunker:Plunker link
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<select class="form-control" name="occupation" onchange='CheckOccupation(this.value);'>
<option value="select"> 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="occupation" id="occupation" class="form-control" placeholder="please specify your occupation..." style='display:none;'/>
<script>
function CheckOccupation(val) {
console.log(val);
var element=document.getElementById('occupation');
if(val=='other')
document.getElementById('occupation').style.display='block';
else
document.getElementById('occupation').style.display='none';
}
</script>
</body>
</html>
尽量不要使用var元素
这应该有效:
function CheckOccupation(selectedType){
if (selectedType == 'Other'){
document.getElementById('occupation').style.display = 'block';
} else{
document.getElementById('occupation').style.display = 'none';
}
}
<select class="form-control" name="occupation" onchange='CheckOccupation(this.value);'>
<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="occupation_other" id="occupation" class="form-control" placeholder="please specify" style='display:none;'/>
问题是你命名为select(职业)然后命名为输入(职业)
无法以相同的名称发送,请尝试更改其中任何一个
尝试用 event
代替 this.value
作为传递给 CheckOccupation
的参数;在 option
元素中包含 value
属性;将 #occupation
处的 name
值更改为 "other"
;还删除具有 .innerHTML
"Lawyer"
<option>
<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;' />