We Keep Coding

Angular 1.5 Selected Attribute on First Option

I recently updated to Angular 1.5, but found that it breaks a very corner case testing feature -- we test a page to see if a certain option is selected in an ng-options:
<select name="User" ng-model="userModel" ng-options="user.key as user.name for user in users">
</select>
This produces html like this:
<option value="string:user1" >User1</option>
<option value="string:user2" >User2</option>
If the first option in the list is selected, then there won't be a "selected" attribute. Otherwise it will be there on the option that is selected, like this:
<option value="string:user1" >User1</option>
<option value="string:user2" selected="selected">User2</option>
Is there any way for the "selected" attribute to appear on the first option of the list if it's selected? As far as I can tell, this worked like that back in Angular 1.2 and before, but was changed in 1.2.19. (https://github.com/angular/angular.js/issues/8366)
Is there some workaround, or another attribute I can set?

How to enable and disable selectmenu JQuery mobile

I have a form that use jquery mobile to generate. I have a dropdown list that initially set to be disabled.
<div data-role="fieldcontain">
<label for="role-edit" class="select">Project Role:</label>
<select name="role-edit" id="role-edit" data-native-menu="false" disabled="disabled" class="edit-projectinput">
<option value="Admin">Admin</option>
<option value="Project Manager">Project Manager</option>
<option value="User">User</option>
</select>
</div>
I would like to enable the disabled selectmenu using jquery.
I tried
$(".edit-projectinput").selectmenu("enable");
But it doesn't work for me.
Could you please instruct me how to enable the disabled selectmenu, and if possible, show me how to disable one.
This is the demo: http://jsfiddle.net/lightbringer/dpv2h/1/

Just do :
$(document).ready(function(){
$("select.edit-projectinput").selectmenu("enable");
});
Demo
Remeber than there will be 2 items with the class .edit-projectinput one the real select that is converted to select menu widget and then the one default selected span element in the widget, so just specifically select the one that matters. Your menu is already initialized just a matter of calling enable method on it.

You have to intialize selectmenu first,
$(".edit-projectinput").selectmenu().selectmenu("enable");
and also use unique class name for the select options.

I know this is an older post, but came across the same issue in my code and found the issue, so posting here for others. Everything I saw online said to use:
$("selectId").selectmenu("disable");
It didn't work. No error, just not disabling the menu.
The fix was a simple # before the ID:
$("#selectId").selectmenu("disable");
Now it disables, no issue :)

Give textfield a value based on option selected from drop down

What I'm trying to do is give my textfield a value based an an option is select form my drop down. For example: I have 2 fields, a drop down and a textfield. I select Facebook from the dropdown and the value "http://www.facebook.com/" appears in my textfield. How can I achieve this effect? I know that I have to call a function onchange of the drop down but that's pretty much everything I know. Remember that I'm not trying to copy the exact selected value from the dropdown to the textfield here.

example markup
<select>
<option value="http://www.facebook.com">Facebook</option>
<option value="http://www.twitter.com">Twitter</option>
</select>
<input type="text" />
jquery
$('select').change(function() {
$('input[type="text"]').val(this.value);
});
Here's a fiddle
In response to your comment, there are a number of ways to do it (a switch statement, if/elseif statement etc), the easiest would probably be to create an object mapping the text to the corresponding url:
var urlFromText = {
'Facebook' : 'http://www.facebook.com/',
'Twitter' : 'http://www.twitter.com/'
};
Then, in your change handler, you can simply use:
$('input[type="text"]').val(urlFromText[$('option:selected', this).text()]);
Here's an example

HTML
<select id="network">
<option value="http://www.facebook.com">Facebook</div>
<option value="http://www.twitter.com">Twitter</div>
</select>
<input id="network-txt"/>
Jquery
$("#network").change(function(){
$("#network-txt").val($(this).val());
});
Working Example http://jsfiddle.net/nVEEE/

Select box onchange event with only one <option>

The onchange event works great and populates my input (textbox) just fine, but when the onchange event is applied to the drop down box with only 1 single option in it, it does not work. How can I get the onchange to fire even if, there is one or multiple items?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript">
function test(x) {
var x = document.getElementById(x).options[document.getElementById(x).selectedIndex].text
document.getElementById('output').value = x
}//end of function
</script>
</head>
<body>
<select id="drop1" onchange="test(this.id)">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br><br>
<select id="drop2" onchange="test(this.id)">
<option value="volvo">Volvo</option>
</select>
<br><br>
<input type="text" id="output">
</body>
</html>

You could add an empty option at the top of every select box, or perhaps an option that just says -Select-. Then, if necessary, alter your script to ignore the empty selection.

If there is only one item, it never will change. Try onblur instead. Or maybe onclick, depending on what you are actually trying to do.

I am answering this question in case it can help somebody in 2020. I had the same problem populating data from the database into the form where there was a single data and I was able to solve this way. In the example am gonna use jquery for illustrations.
First you have to empty the select element using .empty() function.
$('#drop2').empty();
Secondly add an empty value into the select using .append()
$('#drop2').append("<option value='0'>Select</option>");
After that now you can go ahead to add your data into the select element because they are going to be two options, one empty while the other carries the data.
Finally populate your data from server this way using ajax in success function
success:function(response){
$('#drop2').empty().append("<option value='0'>Select</option>");
response.forEach((item)=>{
$('#drop2').append("<option value='"+item[]+"'>"+item[1]</option>");
});
I have used the arrow function .forEach()

If you've come here in 2022 then this is the answer you are looking for:
The easiest solution is to simply put hidden in a 'placeholder' option tag.
<select>
<option hidden value="dontselect">Spinny wheely bois</option>
<option value="volvo">Volvo</option>
</select>
This means that there will always be 2 or more options in the select but the placeholder option does not show in the drop-down list (so won't be able to be selected). The placeholder should be the first option tag inside select just to make your life easier.
But it does mean that when you click the one actual option you'll trigger onChange as internally the select is changing value.

How can I highlight an option in a dropdown menu?

I have a select with some values in it. each value loads a different webpage.
I want the default value that always shows to be "Select page".
How can I highlight the option for the current page when the user clicks on the dropdown?
By highlight i mean either have it selected or change its background colour or something.
HTML:
<select id="siteId" name="siteId" onchange=".....">
<option value="">Select a page</option>
<option row="1" value="68067">MAIN SITE</option>
<option row="2" value="88616">A</option>
<option row="3" value="88617">B</option>
</select>
EDIT: this select is created dynamically. I can only edit it with java-script after the page renders

If you are looking for jQuery solution then :eq() and attribute selector will be your best bet to look for. I have done something: http://jsbin.com/ojexuh/1/edit
first with :eq()
$('select option:eq(2)').css({"background":"green", "color":"white"});
and attribute selector like this one:
$('select option[row="1"]').css({"background":"red", "color":"yellow"});

option does support background colors within a select. I just set up a simple class to highlight it, as seen via here.
You can add a class like this
$('current page selector').addClass('current');
You could also just manually set it with the css function
$('current page selector').css('background-color', 'red');
You don't really have enough information for me to help you determine how to find the current page. I recommend having some way to tell from the value of the option that you can compare to the current window.location.

There's a lot of variability in browser+OS support for this. Taking Chrome as an example, the dropdown doesn't appear to accept any styling on OS X, but on Windows, background colors can be assigned both in a stylesheet and inline style attribute:
<style type='text/css'>
.highlighted {
background-color: yellow;
}
</style>
<select name='whatever'>
<option value='1'>one</option>
<option value='2'>two</option>
<option value='3' style='background-color: green;'>three</option>
<option value='4' class='highlighted'>four</option>
</select>
Again, both methods work on windows, neither on OS X.
If you want a solution that works everywhere, you need to build your own dropdown control.

Set selected="selected" for the option you want to be the default.
<option row="3" value="88617" selected="selected">B</option>