如何在下拉菜單上顯示與選定文本不同的選項文本？

使用簡單的select，我想在選擇選項後在下拉列表中顯示一個文本，並在選擇控件中顯示另一個文本。它的概念非常類似於選項label屬性。如何在下拉菜單上顯示與選定文本不同的選項文本？

我不確定這是否可能。這裏有一個不工作的例如：

<select> 
    <option select-text="-- EMPTY --"> </option> 
    <option select-text="YES!!!">Yes</option> 
    <option>No</option> 
</select>

更新：我沒有提到我需要把在生成的HTML（NG-表過濾器）這種解決方案，因此任何解決方案，不純HTML將很難使用。我甚至考慮尋找另一個表格控件作爲一個更簡單的解決方案，這是非常基本的 - 選擇過濾器中的佔位符文本。

我創建了更具體的我的問題一個問題：
How can I put a placeholder text on ng-table select filter?

來源

2016-08-02 HuBeZa

下面是一個相對簡單的解決方案，它依賴於標準value屬性和定製data-*屬性：

function showDisplayValue(e) { 
 
    var options = e.target.options, 
 
     option = e.target.selectedOptions[0], 
 
     i; 
 
    
 
    // reset options 
 
    for (i = 0; i < options.length; ++i) { 
 
    options[i].innerText = options[i].value; 
 
    } 
 
    
 
    // change the selected option's text to its `data-display` attribute value 
 
    option.innerText = option.getAttribute('data-display'); 
 
} 
 

 
document.getElementById('foo').addEventListener('change', showDisplayValue, false);

<select id="foo"> 
 
    <option data-display="*** BAR ***" value="Bar">Bar</option> 
 
    <option data-display="*** BAZ ***" value="Baz">Baz</option> 
 
    <option data-display="*** QUX ***" value="Qux">Qux</option> 
 
</select>

來源

2016-08-02 14:16:27

偉大的解決方案，只有一個錯誤 - 重新打開下拉列表時，所選值將以星號顯示在列表中。無論如何，正如你可以在我的問題更新中看到它仍然不能幫助我。這是我原來的問題的最佳答案，所以如果沒有更好的東西會彈出，我可能會標記它。 – HuBeZa

@HuBeZa，如果你能詳細說明所需行爲背後的意圖，這將有所幫助。 –

你說得對。由於問題發生了顯着變化，我決定創建一個新的問題 http://stackoverflow.com/questions/38725612/how-can-i-put-a-placeholder-text-on-ng-table-select-filter – HuBeZa

找到類似於你問這裏有什麼東西： https://stackoverflow.com/a/19184179/6555780

它基本上需要JavaScript來組織，所以所選擇的選項將立即顯示在屏幕上，下面的代碼是從大衛的回答採取可以在這裏查看：http://jsfiddle.net/aCb73/

<select name="ref_rubrique" id="ref_rubrique"> 
    <option value="-- EMPTY --" selected> </option> 
    <option value="YES!!!">Yes</option> 
</select> 
<div id="ref_output"></div> 
<script type="text/javascript"> 

    var selectElement = document.getElementById('ref_rubrique'); 
    var divElement = document.getElementById('ref_output'); 

    selectElement.onchange = function() { 
     var selectedValue =  selectElement.options[selectElement.selectedIndex].value; 
     if (selectedValue == '-- EMPTY --') { 
      divElement.innerHTML = '<p>No</p>'; 
     } else if (selectedValue == 'YES!!!') { 
      divElement.innerHTML = '<p>Yes</p>'; 
     } 
    }; 

</script>

這基本上瞄準ref_rubique選擇標籤並顯示在使用Javascript（默認爲--EMPTY--）

繼低於我們的意見，代碼基礎上，選擇下面的代碼可能會NG-表幫助：

self.initialSorting = [ 
    { label: "Id ASC", value: { id: "asc"} }, 
    { label: "Id DESC", value: { id: "desc"} }, 
    { label: "Name ASC", value: { name: "asc"} }, 
    { label: "Name DESC", value: { name: "desc"} } 
    ];

來源

2016-08-02 14:14:07 Rixcy

我無法使它工作，但它看起來像一個好主意（可能更容易使用JQuery）。 – HuBeZa

哪一位不工作？我把上面的代碼放入jsfiddle中，它對我來說工作正常（它將選擇框的外部文本放在ref_output div內） – Rixcy

無論如何，它不會解決我的問題，因爲我需要將此解決方案合併到生成的HTML（ng表格過濾器）。恐怕這需要比這個功能更多的時間。我甚至考慮尋找另一個表格控件作爲一個更簡單的解決方案。無論如何：っ） – HuBeZa

我的理解是你想打印選擇文本屬性中的文本。我發現這個例子，如果這是你在找什麼。

<select id="mySelect"> 
    <option select-text="-- EMPTY --"> </option> 
    <option select-text="YES!!!">Yes</option> 
    <option>No</option> 
</select> 

$("#mySelect").change(function(){  
    $("#mySelect option:selected").text($("#mySelect").val()); 
});

這是我找到類似的地方。 HTML select shows value instead of text

來源

2016-08-02 14:19:14 prashmi

如何在下拉菜單上顯示與選定文本不同的選項文本？

回答

相關問題