CODEWITHSUNDEEP
jqueryhtmldom
preetam
preetam

Reputation: 1587

I am unable to do anything with my select field in jquery

This is the code. I am not able to see any changes on my select. Neither append nor empty is seen here.

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            alert("Button click");
            $("#myselect").empty();
            alert("Done");
            $("#myselect").append('<option value="3">3</option>');
        });
   };
</script>
</head>
<body>

<p id="intro">Hello World!</p>
<select id="myselect">
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<button>Empty the Selector</button>
</body>
</html>

Upvotes: 0

Views: 48

Answers (1)

Felix
Felix

Reputation: 38112

You need to include jQuery to make it works. Also, you're missing ) to close your DOM ready handler

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#myselect").empty();
        alert("Done");
        $("#myselect").append('<option value="3">3</option>');
    });
}); // <-- here
</script>

Fiddle Demo

Upvotes: 4

Related Questions