Develop Reference

How to open disabled fields in Selenium

I'm trying to fill a form using Selenium, but the form has a disabled field.
Disabled field
The field is only editable when I modify the field above it.
Open field
When I set the value directly using the code below, the field is not open for editing
js.executeScript("document.getElementById('field_id').value='" + brand + "'");
Example
I tried to simulate the click in the field, press the tab key, press the enter key, but none had any effect.
Is there any way for me to trigger the same event that the user is performing on the screen to release the field through selenium or javascript?
In the HTML code, the options are not listed, so the options are loaded from a javascript function that is executed after filling the first field
Options

Because I really liked it I'll copy Tschallackas Intro:
Your test is flawed. You are not following user behaviour.
Sadly I totally disagree with the rest of the answer :(
I would like to ask WHY are you trying to use JavaScript?
Is this something a real User would do? I really doubt it!
The crucial thing with End2End-Tests is to simulate your User behaviour as close as possible. Therefore I would suggest to use the Webdriver to do things like that in your Seleniumtest.
Select dropdown = new Select(webdriver.findElement(By.id("field_id")));
dropdown.selectByVisibleText("ONESOURCE");
(Assuming you are using Java by the tag on your question)

Your test is flawed. You are not following user behaviour.
You are doing:
js.executeScript("document.getElementById('field_id').value='" + brand + "'");
Which tries to change a value on a dropdown. This doesn't work because dropdowns work via a selectedIndex, which you can use to get the correct value from the options collection on the dropdown element.
Also, when a user changes a value, a change event is triggered, which notifies other scripts that listen to that event that something has changed. You need to emulate this too to trigger your change script.
js.executeScript("let select = document.getElementById('field_id');"+
"select.selectedIndex = 1;/* change this to the value corresponding to the correct index of the value you wish to test. */"+
"select.dispatchEvent(new Event('change'));");
See the example below for how the javascript should work.
document.getElementById('field_id').addEventListener('change', (e) => {
if(e.target.options[e.target.selectedIndex].value > 1) {
document.getElementById('the_disabled').disabled = false;
}
else {
document.getElementById('the_disabled').disabled = true;
}
});
document.getElementById('trigger').addEventListener('click',() => {
let select = document.getElementById('field_id');
select.selectedIndex = 1;// change this to the value corresponding to the correct index of the value you wish to test.
select.dispatchEvent(new Event('change'));
});
<select id="field_id">
<option value="1">--none--</option>
<option value="2">COMPANY A</option>
<option value="3">COMPANY B</option>
</select>
<BR/>
<select id="the_disabled" disabled="disabled">
<option value="0">--none--</option>
<option value="1">SELECT A</option>
<option value="2">Select B</option>
</select>
<BR/>
<button id="trigger">Trigger selenium emulation</button>

Want to add none as value in select multiple

I am using chosen.jquery.js for select field
<select chosen multiple data-placeholder="Select Body Part(s)"
ng-options="option.Name as option.Name for option in BodyPartList" ng-model="Body_Part">
<option value="" disabled>Select Body Part(s)</option>
</select>
But It shows only data-placeholder value in case of no data in model.
I want to show "Select Body Part(s)" as a option in list.
And user must not select this. Reason is that, I want to add dynamic "Unknown" value in list of Body_Parts. But it not reflect in list.
Same work for select having single selection.

I'm not seeing any problems with your code, as such. Like, I'm trying it and getting the visual behaviour I think you're wanting? Am I missing something?
Html just yours with ng-app etc, javascript is:
var myApp = angular.module('myApp', ['localytics.directives']);
myApp.controller('MyController', function($scope) {
$scope.BodyPartList = [
{ Name: "Arm" },
{ Name: "Leg" }
];
$scope.Body_Part = [];
});
Not sure if data-placeholder is actually doing anything.
Fiddle: http://jsfiddle.net/7187f6d9/
That said, it's not "working". In the fiddle I put a regular select box alongside the chosen one, and the chosen one doesn't seem to be writing to the ng-model correctly. I'm not sure what's up with that.

You can choose the below option
https://harvesthq.github.io/chosen/#optgroup-support
or push another item to the top of the array from server side as your custom label and disable it on client side with the help of ng-if and $index properties of ng-repeat and angularjs. If this make sense then its fine else i can give you a demo.

I hope your query is, you want show a place holder as current selected value but user shouldn't be able to select it.
Instead of making it disabled, make ithidden. Then display an error if a user doesn't select any other options, using the value of placeholder option.
A sample snippet is added below. If value of select is Error, write a case to throw a error back to user.
<select>
<option value="Error" hidden>Select any Company</option>
<option value="Toyota">Toyota</option>
<option value="Nissan">Nissan</option>
<option value="BMW">BMW</option>
</select>
Hope this helps! If not, ping me with your query. :)

Angular blank option selected

I'm banging my head against the wall on this one.
I have an array of objects that will be used to populate a select drop down:
CardCount = [{"ClientId": "0010", "Description": "0010 (206 Members)"}, {"ClientId": "0051", "Description": "0051 (1 Member)"}, ........]
When I attempt to use ng-options, the value of the option is set to the index, not to the ClientId as desired. To get the value in each option to be the ClientId, I have to use a ng-repeat in the options. Here is my html:
<select ng-model="CurrentClient">
<option ng-repeat="item in CardCount" value="{{item.ClientId}}">{{item.Description}}</option>
</select>
Initially, all is well, the select and options are generated correctly, and the first option is correct. Now, when a certain button is clicked somewhere else on the page, it becomes necessary to recreate this select and options with a smaller array of similar objects. However, doing so creates a blank option with a value of "? string:0010 ?". This is the option that is selected. Again, I cannot use ng-options to correct this problem because doing so doesn't set the value attribute in the option tags correctly. So, I added this to the option tag:
<option ng-repeat="item in CardCount" value="{{item.ClientId}}" ng-selected="CurrentClient == item.ClientId">{{item.Description}}</option>
Now, that does mark the correct option as selected. However, the drop down still shows the blank option. Here's the rendered html:
<select ng-model="CurrentClient">
<option value="? string:0010 ?"></option>
<option value="0010" selected="selected">0010 (206 Members)</option>
</select>
As you can see, it sets the correct option to selected. However, it sets it to selected="selected", and not just selected. When I inspect element and change selected="selected" to selected (remove the equals and everything after it), the drop down then correctly displays the correctly selected option.
Again, initially the select and options work great. The problem seems to happen only after the array that the select is created with is changed. How can I get this select and options working correctly after I change the array, and not show that first blank option?
Thanks!

Changed you option element to set value by default.
<option ng-repeat="item in CardCount track by item.ClientId"
value="{{item.ClientId}}">{{item.Description}}</option>
Hope this could help you. Thanks.

ng-options is definitely the way to go:
<select ng-model="selected.ClientId" ng-options="it.ClientId as it.Description for it in clientList">
<option value="">-</option>
</select>

Get Value of Disabled Option in Select Multiple Jquery

I have a multiple select on my page, and I have an option disabled so that the user can't unselect them, but I can't work out how to get the value of the disabled option.
My code so far
// Get selected positions
var $selPositions = $('select#empPositions').val();
HTML
<select name="empPositions[]" id="empPositions" style="width: 370px;" multiple="" data-placeholder="Choose a Position" required="">
<option></option>
<optgroup label="Admin">
<option disabled="">There are no positions assigned to Admin</option>
</optgroup>
<optgroup label="Information Technology">
<option value="1" selected="" disabled="">IT Developer</option>
<option value="2">IT Geeks</option>
</optgroup>
Note the disabled option changes based on other variables, but it only gives me selected non-disabled values. Can anyone let me know if this can be done and how?
I'm using Chosen, hence why the disabled option
Fiddle: http://jsfiddle.net/c5kn5w75/
I did find this article on the JQuery Bug Site which said
The long-standing logic in .val() ensures that we don't return disabled options in a select-multiple. The change just applies the same behavior for select-one now for consistency. You can get to the disabled option value through $("select").prop("selectedIndex") if you need it.
But that didn't work for me.

DEMO
var opt = $('#empPositions option:selected').map(function(i,v) {
return this.value;
}).get(); // result is array
alert( opt );
Please bear in mind that when you submit the form disabled options wont be submitted even if they are selected. If you're submitting via AJAX, then you can grab the values as shown above.
Also bear in mind that $('option[disabled]').val() will return the value of the first disabled option element and $('option[disabled]:selected').val() the value of the first selected disabled option.
If there's always just one selected disabled option element you can target it using:
var opt = $('#empPositions option[disabled]:selected').val(); // result is string

You can get the value of a disabled element by doing something like this:
$('option[disabled]').val();

//==================================
// Option-1:
//==================================
// Get Disabled Options
var disabled_options = $('#selectboxID option[disabled]');
// Get Disabled Ids
var disabled_options_ids = disabled_options.map(function(i,v) {
return this.value;
}).get();
//==================================
// Option-2:
//==================================
// Get Disabled options Ids Using SelectBoxID
var disabled_options_ids= $('#selectboxID option[disabled]').map(function(i,v) {
return this.value;
}).get();

JS/Jquery: how to check whether dropdown has selected values?

I've googled and tried a number of ways to do this but none work for me so far. What I am looking for is quite simple: I want to be able to tell whether a dropdown has a selected value or not. The problem is that selectedIndex, :selected, val(), etc. do return results for the following case:
<select>
<option value="123">123</option>
<option value="234">234</option>
</select>
Obviously the browser will display this dropdown with the 123 option being selected but it will be selected only because there are no other options, in reality this dropdown doesn't have a selected value because there is no "selected" property. So basically I am trying to find how to tell apart the above dropdown from this one
<select>
<option selected value="123">123</option>
<option value="234">234</option>
</select>

var hasValue = ($('select > [selected]').length > 0);
Alternatively,
var hasValue = $('select').has('[selected]');

Quick solution:
<select>
<option selected></option>
<option value="123">123</option>
<option value="234">234</option>
</select>
Then see if you have a .val()

The approved answer doesn't seem to work for me.
Here is how I do it to check if all select options are selected:
if($('select option:selected').length > 0) {
/* Do your stuff here */
}

As far as I can tell, there is no functional distinction between your two examples. Essentially, the browser automatically selects the first option.
See, for example, the result of
$('option:selected')
on your first example.
If you really want to prevent this happening, you have two options. The first is to introduce a new, empty element into the select, per Jason's answer. The other option is to deselect the automatically selected value:
$(document).load(function(){
$('option:selected').attr('selected', false);
});
This clears the selection. Any result of $('select').val() that isn't an empty string will therefore be a change by the user.