check to make sure a option has been chosen from <select></select> list

Question

I have everything working on my form except to validate that a option from the select menu has been chosen..it shows the error but doesnt go away once something is selected

the html

<div id="budget_input">
                <label for="budget">Budget</label>
            <select name="mydropdown">
            <option value="" id="mydropdown"> -- choose one --</option>
            <option value="firstchoice">$0 - $1,000</option>
            <option value="secondchoice">$1,000 - $2,000</option>
            <option value="thirdchoice">$3,000 +</option>
            </select>
</div>

php

$name = trim(stripslashes(htmlspecialchars($_POST['name'])));           
$email = trim(stripslashes(htmlspecialchars($_POST['email'])));
$mydropdown = trim(stripslashes(htmlspecialchars($_POST['mydropdown'])));  

$error_message = '';    
    $reg_exp = "/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,4}$/";

    if (!preg_match($reg_exp, $email)) {

                $error_message .= "<p>A valid email address is required.</p>";             
    }
    if (empty($name)) {

                $error_message .= "<p>Please provide your name.</p>";              
    }

    if (empty($mydropdown)) {

                $error_message .= "<p>Please select an item from the list.</p>";
    }   

the js part shows for the client side

var valid = '';
var required = ' is required.';
var name = $('form #name').val();
var email = $('form #email').val();
var mydropdown = $('form #mydropdown').val();   

if (name == '' || name.length <= 2) {
        valid = '<p>Your name' + required +'</p>';  
    }

    if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
        valid += '<p>Your email' + required +'</p>';                                                  
    }

    if (mydropdown == '') {
        valid += '<p>An item from the list' + required +'</p>';

    }

Answer 1

please replace your code with this one hope it will work.

<div id="budget_input">
                    <label for="budget">Budget</label>
                <select name="mydropdown" id="mydropdown">
                <option value="" > -- choose one --</option>
                <option value="firstchoice">$0 - $1,000</option>
                <option value="secondchoice">$1,000 - $2,000</option>
                <option value="thirdchoice">$3,000 +</option>
                </select>
    </div>

Answer 2

Change Your MARKUP

 <div id="budget_input">
            <label for="budget">Budget</label>
        <select id="mydropdown">
        <option value=""> -- choose one --</option>
        <option value="firstchoice">$0 - $1,000</option>
        <option value="secondchoice">$1,000 - $2,000</option>
        <option value="thirdchoice">$3,000 +</option>
        </select>
 </div>

Change Your JS Code

var valid = '';
var required = ' is required.';
var name = $('form #name').val();
var email = $('form #email').val();
var mydropdown = $('form #mydropdown').val();   

if (name == '' || name.length <= 2) {
    valid = '<p>Your name' + required +'</p>';  
}

if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
    valid += '<p>Your email' + required +'</p>';                                                  
}

if (mydropdown == '') {
    valid += '<p>An item from the list' + required +'</p>';

}

Just Add Your Select Box ID as it is used to check in Jquery that any item is selected or not.

---

Edit#1-Added Screenshots

Answer 3

You are suppose to have id=mydropdown for the js validation to work

 <select id="mydropdown">

now you have just set the name="mydropdown" in your select box