如何在ng選項上設置關閉的下拉值

Question

我正在使用angular來管理從數組中選擇的下拉菜單。

• 數組本身的條目都是小寫的。
• 要在代碼中其他地方使用的「選定」變量要小寫。
• 在下拉列表中顯示的條目要大寫
• 當下拉是關閉它要顯示當前選擇的條目（大寫）以字符串「查看：」前綴。

我在瞭解如何實現前3（通過使用myValue.toUpperCase() for myValue in myArrayOfValues），但我甚至不知道遠程如何去實現第4點 - 無論是在角（理想），或在原JS/jQuery的

任何人都知道如何做到這一點？

Answer 1

我想你想的組合：

• https://api.jquery.com/focusin/
• https://api.jquery.com/change/
• https://api.jquery.com/focusout/

HTML：

<select name=dropdown size=1> 
    <option value="option1">option 1</option> 
    <option value="option2" selected>VIEWING: option 2</option> 
</select> 

Javascr IPT：

var dropdown = $('select[name="dropdown"]'); 

dropdown.focusin(function() { 
    var selected = dropdown.find(":selected"); 
    selected.html(selected.val()); 
}); 

dropdown.change(function() { 
    updateSelected(); 
    $(this).blur(); 
}); 

dropdown.focusout(function() { 
    updateSelected(); 
}); 

function updateSelected() { 
    var selected = dropdown.find(":selected"); 
    var html = "VIEWING: " + selected.val(); 
    selected.html(html); 
} 

https://jsfiddle.net/r89oy2zk/

Answer 2

以下代碼示例應該可以幫助您設置所選選項的文本。

HTML

<select id="yourSelectElementId"> 
    <option id="placeholder" style="display:none"></option> 
    <option>item1</option> 
    <option>item2</option> 
    <option>item3</option> 
</select> 

的Javascript

$("#yourSelectElementId").change(function() { 
    $this = $(this); 
    var text = $this.find("option:selected").text(); 
    var value = $this.val(); 
    var placeholder = $this.find("option#placeholder"); 
    placeholder.text("VIEWING:" + text.toUpperCase()) 
     .attr("selected", true) 
     .val(value); 
}); 
$("#yourSelectElementId").click(function() { 
    $this = $(this); 
    $this.find("option#placeholder").hide(); 
}); 

http://jsfiddle.net/dL8sbqsv/4/

希望幫助！