Select 选项没有得到值

Question

我有一个下拉列表，例如职业，当用户单击选项 "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;'/>

Answer 1

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

Answer 2

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

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

Answer 3

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

Answer 4

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

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

Answer 5

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

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

Answer 7

问题是你命名为select（职业）然后命名为输入（职业）

无法以相同的名称发送，请尝试更改其中任何一个

Answer 8

尝试用 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;' />

Select 选项没有得到值

Select option does not get the value

javascript

html

html-select