"Select" tag in HTML is not working

Question

<form name="form" action="https://kanbanflow.com/api/v1/tasks?" method="post">
<input type="text" name="name" id="name" />
<select>
<option value="258f2200948711e3b418a9a7">To-do</option>
<option value="258f220294b18a9a7">In progress</option>
<option value="258f2201948711e3b4507b78fb18a9a7">Do today</option>
<option value="258f2203948711ea7" selected="selected">Done</option>
</select>             
<button id ="button" value="submit">create_task</button>
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js ">
$(document).ready(function(){
$('select').on('change',function() {
  alert( this.value );
});
});
</script>

We are trying to select the option from the list but its not working. can anyone please help me

Answer 1

The problem is that your script element has both a src attribute and some content. It won't work: the src attribute is used (and jQuery is loaded), but the content is ignored. See HTML 4.01 spec on script . (An HTML5 validator would issue a warning about this.) The solution is to use two script elements instead:

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js ">
 </script>
<script>
$(document).ready(function(){
console.log('setting up');
  $('select').on('change',function() {
    alert( this.value );
  });
});
</script>

Answer 2

this have multiple answers

For single select dom elements, to get the currently selected value:

$('#dropDownId').val();

To get the currently selected text:

$('#dropDownId :selected').text();

Answer 3

If you need to get the selected option's text, use:

$(document).ready(function () {
    $('select').on('change', function () {
        // use .find() to get the selected option and then get the text it contains.
        alert($(this).find("option:selected").html()); /*Replace with .text() if it doesn't yield desired results*/ 
    });
});

Or else, if you need to get its value attribute's value, use:

$(document).ready(function () {
    $('select').on('change', function () {
        alert(this.value);
    });
});

DEMO

Answer 4

please review this code

<form name="form" action="https://kanbanflow.com/api/v1/tasks?" method="post">
        <input type="text" name="name" id="name" />
        <select>
            <option value="258f2200948711e3b418a9a7">To-do</option>
            <option value="258f220294b18a9a7">In progress</option>
            <option value="258f2201948711e3b4507b78fb18a9a7">Do today</option>
            <option value="258f2203948711ea7" selected="selected">Done</option>
        </select>
        <button id="button" value="submit">create_task</button>
    </form>

$(document).ready(function () {
    $('select').on('change', function () {
        alert($('select'));
        alert(this.value);
    });
});

Demo : http://jsfiddle.net/b57Lc/4/

Answer 5

If you wish to see which select option is selected you use this code

<select id="selectlistid">
   <option value="whoa">WHOA!</option>
   <option value="huh">HUH?</option>
</select>

<script type="text/javascript">
function getlistvalue()
    {
    return document.getElementById('selectlistid').options[document.getElementById('selectlistid').selectedIndex].value;
    }
</script>

you need to remeber to use the selectedIndex value to get the right options element to get the actual value of that option.