如何在文本框中选择选项值? (多个选择选项和文本框)

时间:2017-06-22 10:17:36

标签: jquery select

目前,我有以下代码。我想将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> &emsp;&emsp; 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> &emsp;&emsp; 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> &emsp;&emsp; 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> &emsp;&emsp; 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> &emsp;&emsp; 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> &emsp;&emsp;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> &emsp;&emsp;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> &emsp;&emsp; 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> &emsp;&emsp; 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> &emsp;&emsp; 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> &emsp;&emsp; 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> &emsp;&emsp; 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> &emsp;&emsp; 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> &emsp;&emsp; 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> &emsp;&emsp; 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> &emsp;&emsp; 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> &emsp;&emsp; 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> &emsp;&emsp; 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> &emsp;&emsp; 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> &emsp;&emsp; 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条广告

每个问题的等等。谢谢。

0 个答案:

没有答案