获取下拉列表JavaScript的价值

Question

How to make that the all selected options, not the values, but the actual text, would be displayed somewhere?

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);
  });
});

I tried this one code that was posted earlier, but it only display one selection, right after picking, is there any way it could display all the selections and with my random text, like "Your selections"?:

<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

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

This should actually be working.
If that doesn't work, try to place a window.setTimeout(function() { ... }, 10); around your alert. It's possible that the browser calls the myNewFunction() method before it updates the selection value when the user clicks on one option.

EDIT: If you want the text instead of the value, use

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

Answer 2

This should give the actual label text, not the value, for a given select-element.

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

So if you want to show all of them, you could do something like this:

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

And here's a codepen for demo purposes

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

Answer 3

You need to loop through each of the selects, not just the first one:

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

In this case, I push all the values into an array and then join the array values at the end to create the final string.

I updated a codepen provided earlier: http://codepen.io/anon/pen/WvGxgz