Question

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

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

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属性。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

Answer 3

您已设置名称=＆＃34;职业＆＃34;对于这两个领域。尝试为两者使用不同的名称。

resolve: {
    customers: function($http){ 
        return $http.get('/getCustomers');
    } 
}

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

尽量不要使用var元素。

Answer 6

这应该有效：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 7

问题是你命名为select（占用）然后命名为input（占用）

他们无法通过同名发送，尝试更改其中任何一个

Answer 8

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

选择选项无法获取值

8 个答案: