Получение значения выпадающего списка JavaScript

Question

Как сделать, чтобы все выбранные параметры, а не значения, но фактический текст, отображались где-нибудь?

Html:

<h1>Made your PC:</h1> 

<div> 
    <label>Processeor: </label><select id="processor" name="processor"> 
    <option class="label" value>Select Processor</option> 
    <!-- Home Ware --> 
    <option value="P1">Processor 1</option> 
    <option value="P2">Processor 2</option> 
    <option value="P3">Processor 3</option> 
    <option value="P4">Processor 4</option> 

    </select> 
</div> 

<p><strong>Only compatible components will show.</strong></p> 
<div> 
    <label>Select motherboard: </label><select id="motherboard" name="motherboard" class="subcat" disabled="disabled"> 
    <option class="label" value>Select Motherboard</option> 
    <!-- Home Ware --> 
    <option rel="P1 P2" value="AS1">ASUS RAMPAGE V EXTREME</option> 
    <option rel="P2 P3" value="AS2">ASUS ATX DDR3 2600 LGA</option> 
    <option rel="P1 P3 P4" value="GB1">Gigabyte AM3+</option> 
    <option rel="P2 P4" value="MSI1">MSI ATX DDR3 2600 LGA 1150</option> 

    </select> 
</div> 
<div> 
    <label>Select RAM: </label> <select disabled="disabled" class="subcat" id="RAM" name="RAM"> 
    <option class="label" value>RAM Memory</option> 
    <option rel="AS1 AS2 GB1" value="KI1">Kingston Value RAM</option> 
    <option rel="AS1 AS2 MSI1" value="P5KPL">P5KPL-AM SE</option> 
    <option rel="MSI1 GB1" value="960GM">960GM-VGS3 FX </option> 
    </select> 
</div> 

<div> 
    <label>Select Video Board: </label> <select disabled="disabled" class="subcat" id="video-card" name="video-card"> 
    <option class="label" value>Video Card</option> 
    <option rel="MSI1 AS2" value="EVGA8400">EVGA GeForce 8400 GS</option> 
    <option rel="AS1" value="XFXAMD">XFX AMD Radeon HD 5450</option> 
    <option rel="MSI1 GB1" value="GTX750Ti">EVGA GeForce GTX 750Ti SC</option> 
    </select> 
</div> 

Javascript:

$(function(){ 


    var $supcat = $("#processor"), 
     $cat = $("#motherboard"), 
     $subcat = $(".subcat"); 


    $supcat.on("change",function(){ 
    var _rel = $(this).val(); 
    $cat.find("option").attr("style",""); 
    $cat.val(""); 
    if(!_rel) return $cat.prop("disabled",true); 
    $cat.find("[rel~='"+_rel+"']").show(); 
    $cat.prop("disabled",false); 
    }); 

    $cat.on("change",function(){ 
    var _rel = $(this).val(); 
    $subcat.find("option").attr("style",""); 
    $subcat.val(""); 
    if(!_rel) return $subcat.prop("disabled",true); 
    $subcat.find("[rel~='"+_rel+"']").show(); 
    $subcat.prop("disabled",false); 
    }); 
}); 

Я попробовал этот один код, который был размещен ранее, но он показывает только один выбор, сразу после сбора, есть ли способ, это может показать все выборы и с моим случайным текстом, например «Ваши выборы» ?:

<script> 
    function myNewFunction(sel) 
    { 
     alert(sel.options[sel.selectedIndex].text); 
    } 
</script> 

<select id="box1" onChange="myNewFunction(this);" > 
    <option value="98">dog</option> 
    <option value="7122">cat</option> 
    <option value="142">bird</option> 
</select> 

Answer 1

Это должно дать фактический текст метки, а не значение, для данного выбора-элемента.

$(selector).find(":checked").html() 

Так что, если вы хотите, чтобы показать их все, вы могли бы сделать что-то вроде этого:

$("#video-card").on("change", function() { 
    var choices = []; 
    $("select").each(function() { 
    choices.push($(this).find(":checked").html()); 
    }); 
    alert("You selected: " + choices.join(', ')); 
}) 

А вот codepen для демонстрационных целей

http://codepen.io/anon/pen/XbjKYQ

Answer 2

function myNewFunction(sel) { 
    alert($(sel).val()); 
} 

Это действительно должно работать.
Если это не помогает, попробуйте поместить window.setTimeout(function() { ... }, 10); вокруг вашего предупреждения. Возможно, браузер вызывает метод myNewFunction() до того, как он обновит значение выбора, когда пользователь нажмет один вариант.

EDIT: Если вы хотите, чтобы текст вместо значения, используйте

alert($(sel).find("option:selected").text()); 

Answer 3

Вам нужно через каждый из выборок, а не только первый:

function updateOutput() { 
    var selects = document.getElementsByTagName('SELECT'); 
    var output = document.getElementById('output'); 
    var arr = []; 

    for (i=0; i < selects.length; i++) { 
    arr.push(selects[i].options[selects[i].selectedIndex].text); 
    } 

    output.innerHTML = arr.join('; '); 
    return arr; 
} 

В этом случае я выталкиваю все значения в массив и затем соединяю значения массива в конце, чтобы создать окончательную строку.

Я обновил codepen ранее предоставленным: http://codepen.io/anon/pen/WvGxgz