獲取下拉列表的價值JavaScript

如何使所有選定的選項，而不是值，但實際的文本，將顯示在某個地方？獲取下拉列表的價值JavaScript

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>

來源

2015-05-20 Faux

不工作怎麼樣？似乎在這裏工作：http://codepen.io/anon/pen/eNdzMb –

是的，我很抱歉，它確實工作，但我需要顯示所有的選擇，它顯示一個，在採摘後。 – Faux

這應該給實際的標籤文本，而不是價值，對於給定的選擇元素。

$(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

來源

2015-05-20 20:55:48

是否有可能在所有選擇後啓動它，或者是否有一些按鈕觸發它？彈出窗口，我選擇後。 – Faux

它很好用！是否可以製作一個按鈕來觸發它，所以每次進行選擇時都不會彈出？是否有可能寫出類似「這是你的選擇：」的東西？ – Faux

是的，只需選擇你最後的選擇，而不是所有的，我更新了我的文章和codepen反映這 –

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

這實際上應該是有效的。
如果這不起作用，請嘗試在警報周圍放置window.setTimeout(function() { ... }, 10);。瀏覽器在用戶單擊某個選項時更新選擇值之前可能會調用myNewFunction（）方法。

編輯：如果你想要的文字，而不是價值，使用

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

來源

2015-05-20 20:48:16

它可以工作，但它顯示選擇的值，而不是文本。 – Faux

我改變了我的帖子一點。 –

現在確實有效，是否可以顯示所有選項？這一個只顯示一個，在採摘之後。是否有可能在該顯示器上寫下一些內容，如「您的選擇是：」？ – Faux

您需要通過每個選擇循環，而不僅僅是第一個：

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

來源

2015-05-20 21:04:42 Todd

獲取下拉列表的價值JavaScript

回答

相關問題