选择选项没有得到值答案

【问题标题】：Select option does not get the value选择选项没有得到值
【发布时间】：2016-04-25 14:20:20
【问题描述】：

我有一个下拉列表，例如职业，当用户单击“其他”选项时，将显示一个文本框，用户必须指定他的职业。用户选择“其他”并输入他的职业的部分有效，它保存了他输入的内容，但是当用户只是从下拉列表中选择或选择时，我提交表单时不会记录该值。

如何从选择选项中获取值？因为我只有在用户选择“其他”并输入他的职业时才会得到值。这是我的代码。

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 元素 html 在 Question 没有 value 属性集？
顺便说一下，您对两个元素使用相同的名称。最好改变它们
我也试过<option value="Nurse">Nurse</option>，但还是一样的@guest271314
你是什么意思？ @AlexChar
在这里您可以找到答案：enter link description here

标签： javascript html html-select

【解决方案1】：

为您的选项字段设置值属性，并为两个字段提供不同的名称

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;'/>

【讨论】：

【解决方案2】：

<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;'/>

【讨论】：

我以前也这样做过，但还是一样。
您仍然必须在表单提交中包含输入的值。你不能给它同样的name属性。

【解决方案3】：

我认为您可能需要在选项标签中指定一些值。试试这个：

<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>

【讨论】：

我之前也做过，但还是没有解决我的问题。

【解决方案4】：

您已为这两个字段设置了 name="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;'/>

【讨论】：

【解决方案5】：

问题是你命名为select（职业），然后命名为input（职业）

他们不能以相同的名字发送，尝试更改其中任何一个

【讨论】：

感谢您提交答案，我的问题已解决。我希望我能给所有给出正确答案的人打分，但我的权限是有限的。

【解决方案6】：

这应该可行：

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;'/>

【讨论】：

【解决方案7】：

尝试将event 替换为this.value 作为传递给CheckOccupation 的参数；在option 元素中包括value 属性；将 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;' />

【讨论】：

【解决方案8】：

看到这个。我为你创建了一个 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 元素。

【讨论】：