使用 .each 循环的 jQuery 循环和打印/更新数组

Question

我有一个困境，如下所列：

我的代码需要简单地找到当前选择的选项，通过使用循环并使用 jQuery 创建一个数组（以及打印）。

这是我的 HTML：

        <input id="customSKU" name="" value="Test" style="width: 100%; padding: 5px 0px;" type="textarea">

        <div class="product-fields">
                <div class="product-field product-field-type-V">
        <p><span class="product-fields-title"><b>Case &amp; Clip</b></span><br>
        <span class="product-field-desc">Choose a case and clip for your product.</span></p>
        <p>         <span class="product-field-display"><select name="customPrice[0][27]" id="customPrice027"><option value="55">Select Case &amp; Clip</option><option value="56">Black - Large - $25.00 - 1</option><option value="57">Black - None -  - 2</option><option value="58">Beige - Small - $10.00 - 3</option><option value="98">Beige - Large - $20.00 - 4</option><option value="99">Beige - None -  - 5</option><option value="100">Blue - Small - $10.00 - 6</option><option value="101">Blue - Large - $20.00 - 7</option><option value="102">Blue - None -  - 8</option><option value="103">Gray - Small - $10.00 - 9</option><option value="104">Gray - Large - $20.00 - A</option><option value="105">Gray - None -  - B</option><option value="106">Red - Large - $20.00 - R</option><option value="107">Olive Drab - Large - $20.00 - D</option></select></span></p>


        </div><br>
                    <div class="product-field product-field-type-V">
        <p><span class="product-fields-title"><b>Switch Configuration</b></span><br>
        <span class="product-field-desc">Choose a switch configuration for your product.</span></p>
        <p>         <span class="product-field-display"><select name="customPrice[1][28]" id="customPrice128"><option value="60">Select Switch Configuration</option><option value="61">mom-mom0</option><option value="62">mom-lock (on) -  - 1</option><option value="63">PTT - $20.00 - 3</option></select></span></p>


        </div><br>
                    <div class="product-field product-field-type-V">
        <p><span class="product-fields-title"><b>Jack</b></span><br>
        <span class="product-field-desc">Choose a jack for your product.</span></p>
        <p>         <span class="product-field-display"><select name="customPrice[2][29]" id="customPrice229"><option value="64">Select Jack</option><option value="65">TJT-120 (civil helo) - $10.00 - none</option><option value="66">TJT-101 (civil helo) - $30.00 - TJ</option><option value="67">TJT-120 (military) - $10.00 - W</option><option value="68">TJ-101 (military) - $30.00 - TJW</option><option value="69">TJT-125 (5 contacts) - $20.00 - B</option><option value="70">NATO (Europe) - $25.00 - N</option><option value="71">CIJ-051 (comm’l av’n) - $10.00 - C</option><option value="72">U-61/U (USFS) - $35.00 - F</option><option value="73">CIJ-055 &amp; CIJ-068 (general aviation) - $35.00 - G</option></select></span></p>


        </div><br>
                    <div class="product-field product-field-type-V">
        <p><span class="product-fields-title"><b>Volume Control</b></span><br>
        <span class="product-field-desc">Choose a volume control for your product.</span></p>
        <p>         <span class="product-field-display"><select name="customPrice[3][30]" id="customPrice330"><option value="74">Select Volume Control</option><option value="75">No Impedance -  - none</option><option value="76">High Impedance - Grounded - $25.00 - H</option><option value="77">High Impedance - Not Grounded - $25.00 - HA</option><option value="78">Low Impedance - Grounded - $25.00 - L</option><option value="79">Low Impedance - Not Grounded - $25.00 - LA</option></select></span></p>


        </div><br>
                    <div class="product-field product-field-type-V">
        <p><span class="product-fields-title"><b>Cable &amp; Length</b></span><br>
        <span class="product-field-desc">Choose a Cable and Length for your product.</span></p>
        <p><span class="editlinktip hasTip" title="Cable &amp; Length::**special coil cable for EMS applications, 20” straight section from end of cable to switch case" style="text-decoration: none; color: #333;"><img src="/new/includes/js/ThemeOffice/tooltip.png" alt="Tooltip" border="0"></span>           <span class="product-field-display"><select name="customPrice[4][31]" id="customPrice431"><option value="80">Select Cable &amp; Length</option><option value="81">2 ft coil - $20.00 - K2</option><option value="82">3 ft** - $25.00 - KM</option><option value="83">3 ft coil - $25.00 - k3</option><option value="84">6 ft coil - $30.00 - K6</option><option value="85">10 ft coil - $40.00 - K10</option><option value="86">15 ft coil - $60.00 - K15</option><option value="87">20 ft coil - $80.00 - K20</option><option value="88">XXft str’t - $2.00 - /XX</option></select></span></p>


        </div><br>
                    <div class="product-field product-field-type-V">
        <p><span class="product-fields-title"><b>Plug</b></span><br>
        <span class="product-field-desc">Choose a plug for your product.</span></p>
        <p><span class="editlinktip hasTip" title="Plug::*** especially wired for ANR" style="text-decoration: none; color: #333;"><img src="/new/includes/js/ThemeOffice/tooltip.png" alt="Tooltip" border="0"></span>         <span class="product-field-display"><select name="customPrice[5][32]" id="customPrice532"><option value="89">Select Plug</option><option value="90">TP-120 (civil helo) - $20.00 - 74</option><option value="91">TP-120 (military) - $20.00 - 74M</option><option value="92">U-75/U (USFS) - $40.00 - 75</option><option value="93">NATO (Europe) - $30.00 - NP</option><option value="94">U-384/U (5 contacts) - $30.00 - 84</option><option value="95">CIPC-055B &amp; CIPC-068 (gen’l av’n) - $35.00 - YP</option><option value="96">Lugs - $6.00 - 4L</option><option value="97">no plug -  - 4X</option></select></span></p>


        </div><br>


    </div>

这是我的 jQuery

    $(document).ready(function(){
    $( "select option:selected" ).each(function( index ) {
        console.log($( this ).text() );
    });

});

这将在每次循环运行时在控制台中打印一个列表

选定的选项 1

选择的选项 2

选择的选项 3

选定的选项 4

选择的选项 5

选择的选项 6

我需要做的是更新顶部输入框并通过选择框附加要按顺序排列的值，并在条目之间留一个空格破折号空间。

这里是 jsFiddle 的链接 http://jsfiddle.net/vf3ry/2/

编辑:::

我的原始代码，它解析了最后一部分（在最后一个破折号之后）并只提取了那个值：

    $(document).ready(function(){
    $("#customPrice027").change(function(){
        var selectedValues = $('#customPrice027').val();
        var selectedOption = $( "#customPrice027 option:selected" ).text();     

        selectedOption1 = selectedOption.substring(selectedOption.lastIndexOf("-"))
        $('#customSKU').val(selectedOption1);
    });

这段代码是我的测试，在我使用循环方法之前的第一个选择框上。

Answer 1

使用 .map() 和 Array.join()

$(document).ready(function () {
    $('select').change(function () {
        var vals = $("select option:selected").map(function (index) {
            return $.trim($(this).text())
        }).get();

        $('#customSKU').val(vals.join(' - '))
    }).first().change();
});

演示：Fiddle