自動生成輸入

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

來源

2015-10-21 Hasi

你可以在你的'select'項目使用'onchange'事件，並檢查值來設置'mid'相應。但你如何獲得'SNM1'，特別是'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>

來源

2015-10-21 05:42:33

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

來源

2015-10-21 06:26:34

自動生成輸入

回答

相關問題