HTML JS如何來顯示一個下拉列表項

我有一個PROGRAMM，我想有一個名爲DropDownGamer一個下拉列表，我做了文字：HTML JS如何來顯示一個下拉列表項

<select disabled="disabled" id="DropDownGamer"> 
    <option disabled selected value>Valige Youtuber</option> 
    <option value="Terminats">Terminats</option> 
    <option value="HDTanel">HDTanel</option> 
    <option value="DeniedNetwork">DeniedNetwork</option> 
    <option value="Shroud">Shroud</option> 
</select>

現在我有一個複選框，使下拉列表，以便您可以從中進行選擇。我想這樣做：如果您從下拉列表中選擇一個項目，可以說選擇Terminats - 列表中的第一個項目，然後按下一個名爲ShowInfo的按鈕，我希望在那裏顯示按鈕下方的文本，關於這個項目，就像這樣：Terminats有xxx subs和xxx views。我想爲每個項目設置自定義文本。

我想過這樣的事情：

<input id="Button1" onclick="showInfo()" type="button" value="Show Info." /> 

function showInfo() 
{ 
    if (document.getElementById("Terminats")) 
    { 

    } 
    else if (document.getElementById("HDTanel")) 
    { 

    } 
}

但我不認爲這工作或者至少，我似乎無法得到它的工作。

謝謝！

來源

2016-06-09 CrimzonWeb

您是在使用['jQuery']（https://jquery.com/）還是您想要一個普通的JS解決方案？ – tektiv

一個選擇是使用switch語句：

function showInfo() { 
    var selectElement = document.getElementById("DropDownGamer"); 
    switch (selectElement.value) { 
     case 'Terminants': 
      // code to display text for terminants 
      break; 
     case 'HDTanel': 
      // code to display text for hdtanel 
      break; 
     etc... 
    } 
}

最好的辦法是你的按鈕後，創建一個元素，比方說

<p id="description"></p>

，然後像

var description = document.getElementById('description'); 
description.removeChild(description.childNodes[0]); 
var descriptionText = document.createTextNode("your description"); 
description.appendChild(descriptionText);

在相應的case語句中（你首先定位你的元素，然後清空它，如果re是裏面的文本，然後創建新的文本節點並追加它）。

充滿代碼如下：

var description = document.getElementById('description'), 
    selectElement = document.getElementById('DropDownGamer'); 

function showInfo() { 
    switch (selectElement.value) { 
     case 'Terminants': 
      description.removeChild(description.childNodes[0]); 
      var descriptionText = document.createTextNode("your description for terminants"); 
      description.appendChild(descriptionText); 
      break; 
     case 'HDTanel': 
      description.removeChild(description.childNodes[0]); 
      var descriptionText = document.createTextNode("your description for hdtanel"); 
      description.appendChild(descriptionText); 
      break; 
     etc... 
    } 
}

來源

2016-06-09 16:06:25

如果你能告訴我做文本的方式，那也是甜蜜的。 – CrimzonWeb

添加完整的代碼。如果這就是你所需要的，vanila javascript會這樣做，但是如果會有很多的DOM操作，你可能想要使用類似jQuery的東西，因爲它不那麼冗長，會節省很多時間，並且有時會使你免於交叉瀏覽器問題。 –

非常感謝！ :) – CrimzonWeb

我會把數據屬性上的每個選擇項目，然後使用功能抓取數據。你可以把潛艇和意見的權利所選擇的項目，像這樣

<option selected value="Valige Youtuber" data-subs="2" data-views="23">Valige Youtuber</option>

然後在你的showInfo（）數據 - 屬性功能，你可以抓住的選擇列表，並找到datavalue

function showInfo() { 
    var dropdown = document.getElementById('DropDownGamer'); 
    var dataset = dropdown[dropdown.selectedIndex].dataset; 
    var subs = dataset.subs; 
    var views = dataset.views; 
}

或者甚至把整個自定義字符串放入這樣的數據屬性中

<option selected value="Valige Youtuber" data-customString="my custom statement">Valige Youtuber</option>

來源

2016-06-09 16:09:56 skalpin

HTML JS如何來顯示一個下拉列表項

回答

相關問題