Select object value

JavaScript
1

Hi,

I just saw the following:
http://www.w3schools.com/jsref/prop_option_value.asp

And wonder if there’s something wrong with selectObject.value. Why not a simple approach:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function displayResult()
{
alert(document.getElementById("mySelect").value);
}
</script>
</head>
<body>

<form>
Select your favorite fruit:
<select id="mySelect">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="pineapple">Pineapple</option>
  <option value="banana">Banana</option>
</select>
</form>

<button type="button" onclick="displayResult()">Display value of selected fruit</button>

</body>
</html>

It seems to be working with no problem.

Thanks in advance!
Mike

2

The problem is with w3schools, in that some of their examples aren’t useful examples of how things should be used.
Strictly speaking the select object does not officially have a value property, but web browsers unofficially support using that for the convenience that you have found.

I’m sorry that you’re finding trouble with them, they are just a two-man team that find it difficult to maintain and keep up to date, and are not associated with the W3C.

They should not be using an inline event attribute, they should not be using an identifier to access a element of a form, and they should not be using the getElementsByTagName method to access the options of a select element.

Here is some commented code that should help to give you a better idea about things:


<html>
<head>
</head>
<body>
<!--Give the form an identifier so that scripting can easily access the form-->
<form id="favourites">
    <!--Form content must be contained by block-level elements
        which include paragraphs, fieldsets and divs-->
    <p>
        <!--Label form labels using the <label> element.
            We can wrap the label around a field to provide an implicit association.
            With IE6 and worse browsers, you have to use explicit association instead, which
            can be remedied if label support on IE6 becomes required, but makes for messier HTML-->
        <label>Select your favorite fruit:
            <!--Form elements should be appropriately named-->
            <select name="favouriteFruit">
              <option value="apple">Apple</option>
              <option value="orange">Orange</option>
              <option value="pineapple">Pineapple</option>
              <option value="banana">Banana</option>
            </select>
        </label>
    </p>
    <!--Button moved inside of the form and changed to a submit button (the default button type).
        This allows us to capture the onsubmit event of the form, to trigger our function-->
    <p><button type="submit">Display value</button></p>
</form>
<!--Load scripts from the bottom of the page, just before the </body> tag. This allows the rest of the page to load
    without being blocked.-->
<!--Do not place scripting code directly within the HTML page. Like with CSS files, Putting scripts in a separate file
    allows them to be more easily cached, resulting in improved performance and maintenance of your page.-->
<script type="text/javascript" src="script.js"></script>
</body>
</html>



// A wrapper tends to be used to help protect the global namespace and the code from each other.
// This also means that functions are only accessible from within the wrapper.
(function () {
    // Do not drop the opening brace to the next line, as that
    // in certain circumstances with JavaScript causes syntax errors.
    // Being consistant in presentation is more important than matching the style from another langauge.
    function displayResult(form, fieldName) {
        // Use meaningful variable names, not ones called x.
        // Group variables within a function together as one var statement.
        // Multiple var statements should not be used within a function, as that results in
        // an inappropriate temptation to place them elsewhere throughout the code.
        var field = form.elements[fieldName],
            index = field.selectedIndex;
        alert(field.options[index].value);
    }
    
    var form = document.getElementById('favourites');
    form.onsubmit = function () {
        var form = this;
        
        // Pass information to functions that they should need. This helps to keep functions flexible.
        // Functions are less flexible if they know more than they should. 
        displayResult(form, 'favouriteFruit');
        
        // Return false to an event to prevent the default behaviour from occuring.
        // The default behaviour being prevented here is to submit the form to the server.
        return false;
    };
}());
3

You are a teacher by nature! I really appreciate the detailed explanation! :slight_smile: