Question

我有以下选择选项和一个文本框来获取ID。我想知道如何根据两个选择选项的输入获取文本框输出。例如：如果用户选择＆＃34; Single Needle＆＃34;和＆＃34; Mator＆＃34;那么ID应该是＆＃34; SNM1＆＃34;。

选项1

<select class="form-control" name="mtype" id="mtype">
    <option> Single Needle </option>
    <option> Double Needle </option>
     <option> OverLock </option>
 </select>

选项2

<select class="form-control"  name="mmodel" id="mmodel">
    <option>Mator </option>
    <option>Sling </option>
    </select>

文本框

<label>Machine ID</label><input class="form-control" type="text" name="mid" id="mid">

Answer 1

var mtype = document.querySelector('#mtype');
var mmodel = document.querySelector('#mmodel');

mtype.onchange = change;
mmodel.onchange = change;

function change() {
  if (mtype.value != '' && mmodel.value != '') {
    document.querySelector('#mid').value = mtype.value + mmodel.value;
  }
}

<div>Type</div>
<select class="form-control" name="mtype" id="mtype">
  <option value="">Pick Type</option>
  <option value="SN">Single Needle</option>
  <option value="DN">Double Needle</option>
  <option value="OL">OverLock</option>
</select>
<hr />
<div>Model</div>
<select class="form-control" name="mmodel" id="mmodel">
  <option value="">Pick Model</option>
  <option value="M1">Mator </option>
  <option value="M2">Sling</option>
</select>
<hr />
<div>
  <label>Machine ID</label><input class="form-control" type="text" name="mid" id="mid" />
</div>

Answer 2

<html>
<head>
	<title>Code</title>
	<script>
		function fnValue()
			{
			var text1=document.getElementById('mtype').value
			var text2=document.getElementById('mmodel').value
			document.getElementById('mid').value=text1+text2;
			}
			window.onload=fnValue;
	</script>
<body>
	<select class="form-control" name="mtype" id="mtype" onchange="fnValue()">
		<option value="SN"> Single Needle </option>
		<option value="DN"> Double Needle </option>
		<option value="OL"> OverLock </option>
	</select>
	<select class="form-control"  name="mmodel" id="mmodel" onchange="fnValue()">
		<option value="M1">Mator </option>
		<option value="M2">Sling </option>
	</select>
	<label>Machine ID</label><input class="form-control" type="text" name="mid" id="mid">
 </body>
 </head>
 </html>

自动生成输入

2 个答案: