目前,我有以下代码。我想将select选项的值分配给文本输入。我不知道如何循环它,因为我有很多选择选项。
$('select[name=qtyQ1]').change(function() {
$('select[name=qtyQ1] :selected').each(function() {
//how to write this part?
});
});
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
width: 25px;
overflow: hidden;
text-align: center;
}
ol li {
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-12" style="background: whitesmoke;margin-bottom: 10px;">
<h3 style="text-align: left">1. Content </h3>
<div class="row">
<div class="col-sm-12" id="body" style="text-align: left;">
<ol type="a">
<li name="v">
<select class="r1" id="test-select" style="position: absolute; z-index:9998;" onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyQ1">
<option value="0">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>    Content
</li>
<li name="v">
<select class="r1" id="test-select" style="position: absolute; z-index:9997;margin-right: 20px;" onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyQ1">
<option value="0">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>    Content
</li>
<li name="v">
<select class="r1" id="test-select" style="position: absolute; z-index:9996;margin-right: 20px;" onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyQ1">
<option value="0">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>    Content
</li>
<li name="v">
<select class="r1" id="test-select" style="position: absolute; z-index:9995;margin-right: 20px;" onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyQ1">
<option value="0">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>    Content
</li>
</ol>
</div>
</div>
</div>
<div class="col-sm-12" style="background: whitesmoke;margin-bottom: 10px;">
<h3 style="text-align: left">2. Content</h3>
<div class="row">
<div class="col-sm-12" id="body" style="text-align: left;">
<ol type="a">
<li name="v">
<select class="r2" id="test-select" style="position: absolute; z-index:9994;" onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyQ2">
<option value="0">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>    Content
</li>
<li name="v">
<select class="r2" id="test-select" style="position: absolute; z-index:9993;margin-right: 20px;" onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyQ2">
<option value="0">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>   Content
</li>
<li name="v">
<select class="r2" id="test-select" style="position: absolute; z-index:9992;margin-right: 20px;" onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyQ2">
<option value="0">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>   Content
</li>
<li name="v">
<select class="r2" id="test-select" style="position: absolute; z-index:9991;margin-right: 20px;" onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyQ2">
<option value="0">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>    Content
</li>
</ol>
</div>
</div>
</div>
<div class="col-sm-12" style="background: whitesmoke;margin-bottom: 10px;">
<h3 style="text-align: left">3. Content
<div class="row">
<div class="col-sm-12" id="body" style="text-align: left;">
<ol type="a">
<li name="v">
<select class="r3" id="test-select" style="position: absolute; z-index:9990;" onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyQ3">
<option value="0">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>    Content
</li>
<li name="v">
<select class="r3" id="test-select" style="position: absolute; z-index:9989;margin-right: 20px;" onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyQ3">
<option value="0">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>    Content
</li>
<li name="v">
<select class="r3" id="test-select" style="position: absolute; z-index:9987;margin-right: 20px;" onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyQ3">
<option value="0">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>    Content
</li>
<li name="v">
<select class="r3" id="test-select" style="position: absolute; z-index:9986;margin-right: 20px;" onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyQ3">
<option value="0">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>    Content
</li>
</ol>
</div>
</div>
</div>
<div class="col-sm-12" style="background: whitesmoke;margin-bottom: 10px;">
<h3 style="text-align: left">4. Content</h3>
<div class="row">
<div class="col-sm-12" id="body" style="text-align: left;">
<ol type="a">
<li name="v">
<select class="r4" id="test-select" style="position: absolute; z-index:9985;" onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyQ4">
<option value="0">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>    Content
</li>
<li name="v">
<select class="r4" id="test-select" style="position: absolute; z-index:9984;margin-right: 20px;" onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyQ4">
<option value="0">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>    Content
</li>
<li name="v">
<select class="r4" id="test-select" style="position: absolute; z-index:9983;margin-right: 20px;" onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyQ4">
<option value="0">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>    Content
</li>
<li name="v">
<select class="r4" id="test-select" style="position: absolute; z-index:9982;margin-right: 20px;" onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyQ4">
<option value="0">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>    Content
</li>
</ol>
</div>
</div>
</div>
<div class="col-sm-12" style="background: whitesmoke;margin-bottom: 10px;">
<h3 style="text-align: left">5.Content </h3>
<div class="row">
<div class="col-sm-12" id="body" style="text-align: left;">
<ol type="a">
<li name="v">
<select class="r5" id="test-select" style="position: absolute; z-index:9981;" onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyQ5">
<option value="0">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>    Content
</li>
<li name="v">
<select class="r5" id="test-select" style="position: absolute; z-index:9980;margin-right: 20px;" onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyQ5">
<option value="0">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>    Content
</li>
<li name="v">
<select class="r5" id="test-select" style="position: absolute; z-index:9979;margin-right: 20px;" onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyQ5">
<option value="0">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>    Content
</li>
<li name="v">
<select class="r5" id="test-select" style="position: absolute; z-index:9978;margin-right: 20px;" onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyQ5">
<option value="0">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>    Content
</li>
</ol>
</div>
</div>
</div>
<ul type="none">
1<li><input type="text" class="numQ1" name="typeK" id="numQ1" disabled /> K
</li>
<li><input type="text" class="numQ1" name="typeA" id="numQ1" disabled /> A</li>
<li><input type="text" class="numQ1" name="typeV" id="numQ1" disabled /> V</li>
<li><input type="text" class="numQ1" name="typeAd" id="numQ1" disabled /> Ad</li>
</ul>
<ul type="none">
2<li><input type="text" class="numQ2" name="typeA" id="numQ2" disabled /> A </li>
<li><input type="text" class="numQ2" name="typeV" id="numQ2" disabled /> V</li>
<li><input type="text" class="numQ2" name="typeAd" id="numQ2" disabled /> Ad</li>
<li><input type="text" class="numQ2" name="typeK" id="numQ2" disabled /> K</li>
</ul>
<ul type="none">
3<li><input type="text" class="numQ3" name="typeV" id="numQ3" disabled /> V</li>
<li><input type="text" class="numQ3" name="typeK" id="numQ3" disabled /> K</li>
<li><input type="text" class="numQ3" name="typeAd" id="numQ3" disabled /> Ad</li>
<li><input type="text" class="numQ3" name="typeA" id="numQ3" disabled /> A</li>
</ul>
<ul type="none">
4<li><input type="text" class="numQ4" name="typeA" id="numQ4" disabled /> A</li>
<li> <input type="text" class="numQ4" name="typeAd" id="numQ4" disabled /> Ad</li>
<li><input type="text" class="numQ4" name="typeK" id="numQ4" disabled /> K</li>
<li><input type="text" class="numQ4" name="typeV" id="numQ4" disabled /> V</li>
</ul>
<ul type="none">
5<li><input type="text" class="numQ5" name="typeA" id="numQ5" disabled /> A</li>
<li> <input type="text" class="numQ5" name="typeAd" id="numQ5" disabled /> Ad</li>
<li> <input type="text" class="numQ5" name="typeK" id="numQ5" disabled /> K</li>
<li> <input type="text" class="numQ5" name="typeV" id="numQ5" disabled /> V</li>
</ul>
</ol>
例如,如果我选择
1.a. = 4,1.b = 3,1.c = 2,1.d = 1,
然后我的文字输入就会显示
1
4 K
3 A
2 V
1条广告
每个问题的等等。谢谢。