2015-10-21 59 views
-2

我有以下选择选项和一个文本框来获取ID。我想知道如何根据两个选择选项的输入来获取文本框输出。 例如:如果用户选择“单针”和“Mator”,那么ID应该是“SNM1”。自动生成输入

选项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"> 
+2

你可以在你的'select'项目使用'onchange'事件,并检查值来设置'mid'相应。但你如何获得'SNM1',特别是'1'? –

回答

0

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>

0

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