获取下拉列表的值 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);
  });
});

我试过之前发布的这个代码，但它只显示一个选择，在选择之后，有什么办法可以显示所有选择和我的随机文本，比如 "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());
}

这实际上应该有效。
如果这不起作用，请尝试在您的警报周围放置一个 window.setTimeout(function() { ... }, 10);。当用户单击一个选项时，浏览器可能会在更新选择值之前调用 myNewFunction() 方法。

编辑： 如果您想要文本而不是值，请使用

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

Answer 2

对于给定的 select 元素，这应该给出实际的标签文本，而不是值。

$(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(', '));
})

这是用于演示目的的代码笔

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

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

在这种情况下，我将所有值放入一个数组中，然后在末尾加入数组值以创建最终字符串。

我更新了之前提供的代码笔：http://codepen.io/anon/pen/WvGxgz

获取下拉列表的值 JavaScript

Getting value of drop down list JavaScript

javascript

drop-down-menu