We Keep Coding

Value of Select does match selected Option when that option's value is empty

I have some custom select-behaviour in my project, which adds some general functionality to select-boxes. I have implemented that they can be marked as optional, which allows the user to select the default value, which is empty.
Nowhere in the custom javascript code it ever manipulates the select's "value" property directly - it just manipulates the options, adding or removing the selected attribute/property.
This works fine for all real options that have actual values - they get submitted with the value of their value-attribute.
However, when I select the default-option, which's value is empty (value=""), then the browser always sends the value of the 1st option upon form submit. I don't understand why. I can even confirm this with JavaScript.
<select id="stockWay" data-select-name="selectBox" data-optional="" name="stockWay" data-placeholder=“please choose ..." class="hide">
<option value=“FOO”>FOO</option>
<option value=“BAR”>BAR</option>
<option value="" selected="selected">please choose ...</option
</select>
This is the HTML of my select how it's on the site, that's copy pasted.
When I call this JavaScript:
document.getElementById("stockWay").value
it returns "FOO". That doesn't make any sense to me, the empty-value option is clearly selected. And even if the empty value counts as "missing", it should use it's text-content according to the docs. I really don't get what is going on here. I thought the value-property on the select-element is a reflection of what option-children has the selected-attribute?? Clearly there is more going on, but I don't know what or where and how.
Does anyone have any hints where else I could be looking in order to find out how this happens? Any pointers would be greatly appreciated.
Edit: I have just further debugged this in chrome and I could see the following behaviour:
The code calls
selectedOption.setAttribute("selected", "selected");
whenever an option gets selected. For all options with real values, this causes the property "selected" to become true. Only for the empty-value option, this does for some reason not make it become true. It simply remains false. It's literally one line of code. In both cases I can see that selectedOption is the expected element in the page. I don't get it.

Setting a dynamic drop down value in JavaScript

I've been working on this issue for days and feel like I'm at a dead end so hoping someone can help out.
I have a form that's used to log calls. The form has two drop downs Reason and Resolution which are created using an array.
When a call is dropped for whatever reason I want the user to click a button called Lost Call and have it fill out the form with specific information.
It works for every field but the Resolution field. I can't get that one to populate.
The lost call button calls a function using onClick.
<Input type="button" value="Lost Call" onClick="LostCall()" />
All my code is HTML5 and JavaScript.
Here is my HTML code:
<select id="Reason"><option value=" "></option></select>
<select id="Resolution"><option value=" "></option></select>
The script I use to create the drop downs I got from here:
http://jsfiddle.net/bdhacker/eRv2W/
Other then changing the Variable names to suit my form and less options the code is the same.
The Question is how can I make it to where someone clicks lost call the form is filled out including the Reason and Resolution with specific values when the Resolution values are dynamically generated?
Here is the script for the Lost Call Button:
function LostCall() {
var Reason = document.getElementById("Reason");
Reason.Value = 'Misc/Other';
var Resolution = document.getElementById("Resolution");
Resolution.Value = 'Lost Call';
Using the above Reason is populated but not Resolution. Also note both Misc/Other and Lost Call are options available in the array I'm using.

EDIT: Updated fiddle.
Hmm, your code is working, as I've tried it in this quick fiddle
Are you simply missing a closing } or was that just a simple mistake when typing this question?

if the value you are assigning in the list of options, try this approach:
function LostCall() {
document.getElementById("Resolution").selectedIndex = "2";
}
check out the following resource (press the "try it yourself" button) : http://www.w3schools.com/jsref/prop_select_selectedindex.asp

Add Option Tag with value to empty Select Tag

i have this element in my Code(added with jquery, works fine):
<span id='userProfileHiddenSelectBox' class='profileItem'><select disabled><option value='no' selected>-No hidden contents-</option></select></span>
After that this option is removed and some other options were put into the select tag, which is now enabled.
Maybe later(Depends on user interaction), the other options were removed, the select is disabled and i am trying to put the old option-tag inside again.
This works, if it has no value Attribute(but i need it for some other code).
But if i add the value attribute (I tried jquery .val('theValue'), .attr('value','theValue') and add it with the option element) the option tag disappears on the screen and in the code(firefox inspector or google chrome dev tools). I don't know what happened.
Thank you for some help.

Could always try using full html when replacing the contents of the select. I personally haven't played much with values, but this appears to work:
$("selector").html("<option value='no' selected>-No hidden contents-</option>");
While I understand that this is probably not the best way to go about it, it can do in a pinch.

How do I create a box that explains input fields as a user progresses through a form?

I would like a box very much like the one on the Ask Question page which explains/clarifies what kind of data should go into each field of a form. I have tried to "view source" on this page but I simply can't make heads nor tails of what's going on. Could someone please explain it or is there a tutorial I could use?
Example:
When a user clicks into a text input the box explains what should go there
Drop-down menu labeled Company Type with several types of companies. Users have been misclassifying themselves because they don't understand what each type refers to. When the user clicks on the drop-down menu, the text within the box explains each company type.
See link for screenshot of a part of the form: http://imgur.com/TYOmT
I would also like to have the box travel down the form (so that it is always just to the right of the field that the user is working with)
Thank you!

Given HTML like so:
<form>
<select name="some_name" id="some_name">
<option value="option1" data-description="Description of option1">option1</option>
<option value="option2" data-description="Description of option2">option2</option>
</select>
</form>
<div id="description">
Default Description
</div>​
the following javascript will take the value of data-description of the selected option, and populate the #description with it.
var $description = $('#description');
$('#some_name').on('change', function(event){
var $option = $(event.currentTarget).find(':selected');
$('#description').html($option.attr('data-description'));
});
Here's a working example.
You can easily extend that to create something to give more information for each particular input by either creating additional handlers for each input, or for creating a handler for any input on the form.
There are a variety of different ways you can keep the description fixed, using display:fixed or something like Twitter Bootstrap's affix.

Show hide select list depending on other select list value

The following code show one (of many hidden) child select list depending on the value of the parent select list. The script check if any value is selected (in the parent select list) and if so show the corresponding child select list. But if the user select a value for the parent select list, post the form, get a message that the child select list miss input and (most likely) presses back button in the browser the parent select list still has a value (I guess browser default) and the child select list is hidden which will most likely confuse the user.
How can this be solved?
Javascript:
$('#parent-list').live("change",function() {
var value = $(this).find('option:selected').val();
$("#child-list-"+value).slideDown(200).siblings().hide();
return false;
});
HTML:
<select id="parent-list" name="parent">
<option value="1">1</option>
...
</select>
<select id="child-list-1 style="display:hidden">
<option value="a">a</option>
</select>
<select id="child-list-2 style...

I typically select an appropriate option on every page load, either through the code generating the HTML or in the JavaScript when the document is ready.

I think this is a common problem, and as far as I know there is no perfect solution.
You need to find some way to check whether the page is in an invalid state, such as a refresh timer (setInterval) that can check any dependencies and re-render if necessary.
If the user presses the back button after a POST he will get a warning (at least in some browsers). Though you can not trust users to realize the issue...
EDIT: Also, why is the user redirected to another page for the error messages? Can you instead redirect him back to the form if an error occurs, or preferably perform the validations client side before form submission?